Question

由于某种原因，hover伪选择器在后台更改后停止工作。我知道这是因为它为背景创建了两个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;
}

Answer 2

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

Answer 3

只需将 important 标签添加到您的悬停效果即可。

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

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

3 个答案: