使用jquery动态更改背景颜色后，背景颜色的CSShover选择器无法正常工作
我使用jquery .css()方法动态更改div的背景颜色。 我还希望在同一个div上有一个CSS hover选择器来改变背景颜色。 似乎在使用jquery更改颜色之前，CSS hover选择器可以工作，但是在使用jquery方法更改div之后，CSS hover选择器不再起作用。 有没有办法解决这个问题（不使用jquery hover方法）？
这是我所说的一个例子： http ： //jsfiddle.net/KVmCt/1/
您遇到的问题是CSS信息的位置的重要性：
外部样式表在文档的头部被CSS过度统治; 反过来，它在元素的style属性中被CSS过度控制。 基本上，浏览器遇到的最后一种样式会覆盖任何先前指定的和其他冲突规则（除非使用!important的关键字）。
由于JavaScript和jQuery将其CSS /样式信息放入元素的内联style属性中，因此始终会覆盖其他地方指定的冲突样式。
更重要的地方是color: red代表div ，无视div:hover样式。
要解决它，您可以使用：
div:hover { background-color: blue!important; }
JS小提琴演示 。
但是，更好的解决方案是避免使用jQuery分配background-color /其他样式，并简单地使用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小提琴演示 。
jquery css方法为你的元素添加了一个内联样式，这意味着在执行它之后，你的div看起来就像
Hello world`
现在，内联样式始终比css样式更优先，因此您的问题。
那么，为什么不添加一个css类而不是使用内联样式？ 尝试使用以下内容：
$("div").addClass("edited");
和
div:hover, div.edited:hover { background-color: blue; } div.edited { background-color: red; }
你会发现它有效。
当您使用jQuery操作css时，它会内联添加它并覆盖样式表中的任何css尝试使用jquery添加和删除在hover时更改颜色的类。 这是工作小提琴： http ： //jsfiddle.net/KVmCt/6/
jQuery看起来像这样：
$("div").hover( function(){ $(this).addClass("blue"); } , function(){ $(this).removeClass("blue"); });
如果您只需要删除可以使用的内联样式
$("#yourselector").attr("style", " ");
它将用style=" "替换你的内联样式
一种简单的方法是将重要标记添加到CSS中。
div:hover { background-color: blue !important; };