jQuery.css（）和css hover属性之间的冲突

基本上，我有3个链接，当用户进入/离开链接区域时，我使用了悬停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;
}

---

问题是第一次工作正常：单击一个链接后，

hover

CSS属性被忽略！单击后，

悬停

似乎已被禁用。非常感谢您的帮助，谢谢

尝试一些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');
});

尝试将您的
：悬停
属性设置为
！重要信息
，它们应该覆盖内联样式

或者，如果您不喜欢使用
！重要信息
，您可以使用
.toggleClass（）
添加和删除特定类，而不是直接更改内联CSS样式。
内联样式覆盖样式表样式。这是预期的行为。删除“样式”属性以使样式表重新处于控制状态，而不是将颜色设置回默认值

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

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