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

Question

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

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

Answer 1

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

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

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

在地方更为重要color: red的div,无视div:hover风格.

要解决它,您可以使用:

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

JS小提琴演示.

但是,更好的解决方案是避免background-color使用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小提琴演示.

Answer 2

jquery css方法为你的元素添加了一个内联样式,这意味着在执行它之后,你的div看起来就像

<div style="background-color: red">Hello world</div>`

现在,内联样式始终比css样式更优先,因此您的问题.

那么,为什么不添加一个css类而不是使用内联样式？尝试使用以下内容:

$("div").addClass("edited");

和

div:hover, div.edited:hover {
   background-color: blue;
}

div.edited {
   background-color: red;
}

你会发现它有效.