jquery - 使用 jquery 动态更改背景颜色后，用于背景颜色的 CSS 悬停选择器不起作用

Question

我使用 jquery .css() 方法动态更改 div 的背景颜色。我还希望在同一个 div 上有一个 CSS hover 选择器来改变背景颜色。看起来在用jquery改变颜色之前，CSS hover选择器可以工作，但是在用jquery方法改变div之后，CSS hover选择器不再起作用了。有没有办法解决这个问题(不使用 jquery hover 方法)？

这是我所说的示例:http://jsfiddle.net/KVmCt/1/

Answer 1

您遇到的问题是 CSS 信息位置的重要性:

文档头部的 CSS 覆盖了外部样式表；这反过来又被元素的 style 属性中的 CSS 所控制。基本上，浏览器遇到的最后一种样式会覆盖任何先前指定的和其他冲突的规则(除非使用关键字 !important)。

作为 JavaScript，因此也是 jQuery，将其 CSS/样式信息放入元素的内联 style 属性中，这总是会覆盖在其他地方指定的冲突样式。 p>

div 的 color: red 更为重要，忽略了 div:hover 样式。

要解决它，您可以使用:

div:hover {
    background-color: blue!important;
}

JS Fiddle demo .

不过，更好的解决方案是避免使用 jQuery 分配 background-color/other 样式，而只使用 CSS:

div {
    background-color: red;
}

div:hover {
    background-color: blue!important;
}

或者，您可以使用 jQuery 的 hover() 方法:

$('div').css('background-color','red').hover(
    function(){
        $(this).css('background-color','blue');
    },
    function(){
        $(this).css('background-color','red');
    });

JS Fiddle demo .