我的思维大概是这样的-----有一个导航栏,用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样式权重是最高的