Question

我无法让我的活动标签显示蓝色背景和白色文字，同时还有我的悬停工作。建议将不胜感激。看起来很简单，但我已经苦苦挣扎了几天。

感谢。

jQuery:
$('nav #secondary li').on('click',function(){
    $('nav #secondary li').removeClass('active');
    $(this).addClass('active');
});

CSS:
nav #secondary li:hover, .active {
    background-color:#1F4B80;
    color:#FFFFFF;
}

http://jsfiddle.net/XBfMV/213/

Answer 1

这是因为选择器nav #secondary li（将color设置为#1F4B80）的格式为higher specificity calculation而不是选择器.active。

将.active的{{3}}增加到nav #secondary li.active。

specificity

nav #secondary li:hover,
nav #secondary li.active {
    background-color: #1F4B80;
    color: #FFFFFF;
}

或者，您也可以降低选择器的特异性。要么工作。

对于它的价值，这里是每个选择器的Updated Example：

nav #secondary li - 102
nav #secondary li.active - 112
.active - 10（这就是被覆盖的原因）

jQuery活动文本颜色不变

1 个答案: