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属性中，此始终会覆盖其他地方指定的冲突样式。

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

要解决此问题，您可以使用：

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

JS Fiddle demo

更好的解决方案是避免使用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 Fiddle demo

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;
}

你会发现它有效。

Answer 3

当你使用jQuery操作css时，它会内联添加它并覆盖样式表中的任何css尝试使用jquery添加和删除一个更改悬停颜色的类。这是工作小提琴：http://jsfiddle.net/KVmCt/6/

jQuery看起来像这样：

$("div").hover(
function(){
$(this).addClass("blue");
 }
,
function(){
$(this).removeClass("blue");
});

Answer 4

如果您只需要删除内联样式，可以使用

$("#yourselector").attr("style", " ");

它将使用style=" "

替换您的内联样式

Answer 5

一种简单的方法是将重要标记添加到CSS中。

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

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

5 个答案: