jQuery .css()与CSS hover属性之间的冲突

Question

基本上我有3个链接，我使用了hover CSS属性，使它们在用户进入/离开链接区域时变成白色/红色：

<div id="nav-glob">
    <ul>
        <!--menu-->
        <li class="nav-home"><a href="#content">Home</a></li>
        <li class="nav-portfolio"><a href="#lavori">Portfolio</a></li>
        <li class="nav-contact"><a href="#footer">Contact</a></li>
    </ul>
</div>

.nav-glob a:hover {
    color: red;
}

然后在jQuery中，我使用了click()函数将CSS的color属性设置为红色：

$('.nav-home > a').click(function(){
    $(".nav-home a").css("color", "red");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "white");
});

$('.nav-portfolio > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "red");
});

$('.nav-contact > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "red");
    $(".nav-portfolio a").css("color", "white");
});

问题在于第一次运行正常：点击一个链接后，hover CSS属性就被忽略了！看起来好像是在点击后禁用了hover。非常感谢您的帮助，谢谢。

- user1098965

Answer 1

尝试一些CSS来处理不同的标签状态：

a.clicked {
    color: #f00;
}
a.hovered{
   color: #f00 !important;
}
a.faded {
    color: #fff
}


$('#nav-glob ul li a').hover(function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).addClass('hovered');
}, function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).removeClass('hovered');
}).click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

演示

或者就像@Blazemonger所说的那样

a.faded {
    color: #fff
}
a.clicked {
    color: #f00;
}
a:hover{
   color: #f00 !important;
}

$('#nav-glob ul li a').click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

DEMO

- thecodeparadox

Answer 2

尝试将您的 :hover 属性设置为 !important ，它们应该覆盖内联样式。

或者，如果您不喜欢使用 !important ，可以使用 .toggleClass() 来添加和删除特定类，而不是直接更改内联CSS样式。

- Blazemonger

Answer 3

内联样式会覆盖样式表样式。这是预期的行为。不要将颜色设置回默认值，而是删除样式属性，以便样式表重新控制。

$('#nav-glob a').click(function(){
    var $this = $(this);
    $this.parent().siblings().children('a').removeAttr("style");
    $this.css("color", "red");
});

- Kevin B