javascript - 为什么单击事件后悬停停止工作？

Question

由于某种原因，悬停伪选择器在背景更改后停止工作。我知道这是因为它为背景创建了两个 css 规则，而由 jquery 单击引起的规则覆盖了悬停规则。尽管知道原因......我不知道如何解决这个问题。有谁知道如何解决这个问题？谢谢!

HTML

<nav class="top">
    <a class="ajaxAnchor" href="home.html">
        <button id="navOne" class="top">
            <span class="top">Home</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="repair.html">
        <button id="navTwo" class="top">
            <span class="top">Repairs</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="training.html">
        <button id="navFour" class="top">
            <span class="top">Training</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="products.html">
        <button id="navThree" class="top">
            <span  class="top">Products</span>
        </button>
    </a>
    <a class="ajaxAnchor" href="about.html">
        <button id="navFive" class="top">
            <span class="top">About</span>
        </button>
    </a>
</nav>

CSS

.top button:hover{
    background: #000000;
}

JavaScript

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    $('a .top').css({'background' : 'transparent'});
    $('a .top').children().css({'background' : 'transparent'});
    $(this).children().css({'background' : '#EEEEEE'});
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

Fiddle

Answer 1

您可以向事件元素添加一个类，而不是直接设置样式。

脚本:

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    $('.ajaxAnchor').removeClass('active');
    $(this).addClass('active');
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

CSS:

.top button:hover, .active .top button:hover{
  background: #000;
}
.active .top button {
  background: #eee;
}