我的思维大概是这样的-----有一个导航栏,用css写了hover事件,鼠标放上去会变成蓝色;
下面就有一个需求,点击导航某一项页面不会跳转,还在本页面,点击哪一个让哪一个变成蓝色,其余的为灰色的,但是当我点击完成之后,hover事件就会失效,不起作用了,
我的css代码是这样的
.content-top1>p:hover{
color: #19b1e8;
}
我的js代码
$(".content-top1>p").click(function(){
$(".content-top1>p").css({
'background': 'white',
'border': '1px solid #666666',
'color': '#666666'
});
$(this).css({
'background': '#19B1E8',
'border': 'none',
'color': 'white'});
}
但是:当你点击某一个之后点击的那个确实变蓝色了,其余也变灰了,但是hover失效了,我找了好多资料,经过分析之后得出结论为:js操作的权重比外部css样式的权重高,刚开始没有点击,js没有执行,但是点击后js执行了,所以css代码就失效了。
解决方法为:
.content-top1>p:hover{
color: #19b1e8 !important;
}
这样就解决这个问题了,因为带 ! important的css样式权重是最高的