为什么点击事件后悬停停止工作？

Question

For some reason the hover pseudo selector stops working after the background gets changed. I understand that this is caused because it creates two css rules for the background and the one caused by the jquery click overrides the hover one. Despite knowing the cause... I'm not sure how to fix this. Does anyone know how to workaround this? Thanks!

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

You can add a class to the active element instead of setting the style directly.

Script:

$('.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;
}

Answer 2

您正在使用 jquery 更改背景，因此其更改的标签样式属性您的 css 无法覆盖它，因此您可以使用!important或者您可以使用 javascript 进行悬停事件。

Answer 3

Just add important tag to your hover effect.

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