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

Posted 2023-03-06

【中文标题】使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用

【英文标题】：CSS hover selector for background-color not working after dynamic change of background-color with jquery

【发布时间】：2012-02-15 11:28:17

【问题描述】：

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

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

【问题讨论】：

让他们都添加一个改变背景颜色的类怎么样？

div 的选择器是什么，jQuery 方法的选择器是什么？你能展示其中的一些台词吗？

@w0rldart 更新了代码示例

@DavidThomas 嗯？我要说的是hover 选择器应该可以工作，即使在我用jquery 设置好DOM 的颜色之后。但事实并非如此。

您需要更清楚地了解您的问题，尤其是考虑到您已经存在很长时间并且已经提出了几百个问题。

【参考方案1】：

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

jQuery 看起来像这样：

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

【讨论】：

或直接包含 $(this).toggleClass("blue"); 作为悬停方法参数的 1 个函数。 ;)

【参考方案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;

你会看到它有效。

【讨论】：

由于问题与jQuery无关，所以在原版JS中使用document.querySelector("div").classList.add("edited");。

【参考方案3】：

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

外部样式表被文档头部的 CSS 覆盖；这反过来又被 CSS 在元素的 style 属性中推翻。基本上，浏览器遇到的最后一个样式会覆盖任何先前指定的，否则会发生冲突的规则（除非使用了 !important 的关键字）。

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

div 更重视color: red，忽略div:hover 样式。

要解决它，您可以使用：

div:hover 
    background-color: blue!important;

JS Fiddle demo.

不过，更好的解决方案是避免使用 jQuery 分配 background-color/other 样式，而只需使用 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.

【讨论】：

@Justin - 我从来没有机会使用 jQuery 的 .css() 方法，而是在 stecb 对 Nicole 的回答的评论中切换 DOM 元素上的类 - 但只是悬停不需要 javascript正如大卫在这里所说的那样。

当我遇到这个问题时，我的第一反应是使用 jQuery 的.hover() 来设置它，就像我用 CSS 编写的那样，然而，令我惊讶和沮丧的是，它仍然是不活动（即使.hover() 函数的脚本出现在其他动态变化的背景颜色脚本之后）。如果我知道将 CSS 中的规则指定为 !important 会起作用，我一开始就不会尝试用代码来纠正这个问题，但幸运的是，这个答案给了我完美的解决方案。将来，我将把它更多地放在我的脑海中。

当我有一个 JQuery 命令更改类的背景颜色时，“！important”解决方案对我有用，并且该命令以某种方式禁用了 CSS 定义的悬停效果。奇怪的是，JQuery 禁用了悬停效果的 background-color 属性，但没有禁用它的 cursor 属性。无论如何，它现在可以通过添加 !important 到 CSS 中，所以谢谢。

你为我节省了很多时间！这也发生在反应中。谢谢大佬！

【参考方案4】：

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

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

【参考方案5】：

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

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

它将用style=" "替换你的内联样式