css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?...

    xiaoxiao2024-03-09  132

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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)