使用 jquery 动态更改背景颜色后，用于背景颜色的 CSS 悬停选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8949194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hover selector for background-color not working after dynamic change of background-color with jquery
提问by Justin Meltzer
I dynamically change the background color of a div with the jquery .css()method. I also want to have a CSS hoverselector on that same div that changes the background color. It seems that before the color is changed with jquery, the CSS hoverselector works, but after the div is changed with the jquery method, the CSS hoverselector no longer works. Is there a way to work around this (without using the jquery hovermethod)?
我使用 jquery.css()方法动态更改 div 的背景颜色。我还想hover在同一个 div 上有一个 CSS选择器来改变背景颜色。好像在用jquery改变颜色之前，CSShover选择器起作用，但是用jquery方法改变div后，CSShover选择器不再起作用。有没有办法解决这个问题（不使用 jqueryhover方法）？
This is an example of what I'm talking about: http://jsfiddle.net/KVmCt/1/
这是我正在谈论的一个例子：http: //jsfiddle.net/KVmCt/1/
回答by David says reinstate Monica
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 styleattribute of the element. Basically the last style encountered by the browser overrides any previously specified, and otherwise-conflicting, rules (unless the keyword of !importantis used).
外部样式表在文档头部被 CSS 否决；反过来，它在style元素的属性中被 CSS 否决。基本上，浏览器遇到的最后一个样式会覆盖任何先前指定的、否则会产生冲突的规则（除非使用了关键字 of !important）。
As JavaScript, and therefore jQuery, places its CSS/styling information into the in-line styleattribute of the element this alwaysoverrides conflicting styles specified elsewhere.
作为 JavaScript，因此 jQuery，将其 CSS/样式信息放入style元素的内联属性中，这始终会覆盖其他地方指定的冲突样式。
The places more importance on the color: redfor the div, disregarding the div:hoverstyles.
The 更重视color: redfor div，而忽略div:hover样式。
To work around it, you can use:
要解决它，您可以使用：
div:hover {
background-color: blue!important;
}
A better solution, though, is to avoid assigning the background-color/other styles with jQuery, and simply use CSS:
不过，更好的解决方案是避免background-color使用 jQuery分配/other 样式，而只需使用 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');
});
回答by StefanoP
The jquery cssmethod adds an inline style to your elements, which means that after executing it, your div will look like
jquerycss方法为您的元素添加了内联样式，这意味着执行它后，您的 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.
你会看到它有效。
回答by Nicole McCoy
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 尝试使用 jquery 添加和删除一个在悬停时更改颜色的类。这是工作小提琴：http: //jsfiddle.net/KVmCt/6/
jQuery looks like this:
jQuery 看起来像这样：
$("div").hover(
function(){
$(this).addClass("blue");
}
,
function(){
$(this).removeClass("blue");
});
回答by Tristan
if you just need to delete the inline style you can use
如果您只需要删除可以使用的内联样式
$("#yourselector").attr("style", " ");
It will replace your inline style with style=" "
它将替换您的内联样式 style=" "
回答by Ma9ic
A simple way would be to add the important tag to your CSS.
一种简单的方法是将重要标签添加到您的 CSS。
div:hover {
background-color: blue !important;
};
