背景颜色的CSS悬停选择器在使用jquery动态更改背景颜色后无法正常工作

我用jquery .css()方法动态地更改div的背景颜色。我也想在同一个div上设置一个CSS悬浮选择器，改变背景颜色。似乎在使用jquery更改颜色之前，CSS悬停选择器可以使用，但是在使用jquery方法更改div之后，CSS悬停选择器不再有效。有没有办法解决这个问题(不使用jquery hover方法)？

这是我在说的一个例子：http://jsfiddle.net/KVmCt/1/

解决方法

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

外部样式表在文档的头部由CSS过大;这反过来又被CSS元素的style属性所超过。基本上浏览器遇到的最后一个样式会覆盖任何先前指定的或者其他冲突的规则(除非使用了！important的关键字)。

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

这个地方比较重要的颜色：红色为div，不考虑div：hover风格。

要解决它，您可以使用：

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

JS Fiddle demo。

然而，更好的解决方案是避免使用jQuery分配背景颜色/其他样式，只需使用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。