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

I dynamically change the background color of a div with the jquery .css() method. I also want to have a CSS hover selector on that same div that changes the background color. It seems that before the color is changed with jquery, the CSS hover selector works, but after the div is changed with the jquery method, the CSS hover selector no longer works. Is there a way to work around this (without using the jquery hover method)?

我使用jquery .css()方法动态更改div的背景色。我还想在相同的div中设置一个CSS鼠标悬停选择器来改变背景颜色。在使用jquery更改颜色之前，CSS悬浮选择器可以工作，但是在使用jquery方法更改div之后，CSS悬浮选择器就不能工作了。是否有办法解决这个问题(不使用jquery hover方法)?

This is an example of what I'm talking about: http://jsfiddle.net/KVmCt/1/

这是我正在讨论的一个例子:http://jsfiddle.net/KVmCt/1/

5 个解决方案

#1

The problem you're experiencing is the importance of the location of the CSS information:

您正在经历的问题是CSS信息位置的重要性:

An external stylesheet is over-ruled by CSS in the head of the document; which is, in turn, over-ruled by CSS in the style attribute of the element. Basically the last style encountered by the browser overrides any previously specified, and otherwise-conflicting, rules (unless the keyword of !important is used).

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

As JavaScript, and therefore jQuery, places its CSS/styling information into the in-line style attribute of the element this always overrides conflicting styles specified elsewhere.

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

The places more importance on the color: red for the div, disregarding the div:hover styles.

更重要的是颜色:红色表示div，而不是div:悬浮样式。

To work around it, you can use:

要解决这个问题，您可以使用:

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

JS Fiddle demo.

JS小提琴演示。

A better solution, though, is to avoid assigning the background-color/other styles with jQuery, and simply use CSS:

不过，更好的解决方案是避免使用jQuery来指定背景颜色/其他样式，并简单地使用CSS:

div {
    background-color: red;
}

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

Alternatively, you could use jQuery's hover() method:

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

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

JS Fiddle demo.

JS小提琴演示。

#2

The jquery css method adds an inline style to your elements, which means that after executing it, your div will look like

jquery css方法将内联样式添加到元素中，这意味着在执行后，您的div将看起来像这样

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

Now, inline styling has always more priority than css styling, hence your problem.

现在，内联样式总是比css样式更重要，这就是问题所在。

So, why not adding a css class instead of using inline styling? Try with the following:

那么，为什么不添加一个css类而不是使用内联样式呢?试试用以下:

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

and

和

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

div.edited {
   background-color: red;
}

and you'll see it works.

你会看到它起作用了。

#3

When you manipulate css with jQuery it adds it inline and overrides any css in a stylesheet try using jquery to add and remove a class that changes the color on hover. Here's the working fiddle: http://jsfiddle.net/KVmCt/6/

当您使用jQuery操作css时，它会以内联方式添加css，并覆盖样式表中的任何css。这里是工作的小提琴:http://jsfiddle.net/kvmct/6/。

jQuery looks like this:

jQuery是这样的:

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

#4

if you just need to delete the inline style you can use

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

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

It will replace your inline style with style=" "

它会用style=" "取代你的行内样式"

#5

A simple way would be to add the important tag to your CSS.

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

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