Javascript backgroundColor 确实删除了 CSS 悬停？答案

【问题标题】：Javascript backgroundColor does remove css hover?Javascript backgroundColor 确实删除了 CSS 悬停？
【发布时间】：2017-04-05 16:36:14
【问题描述】：

我的 div 有类：

.cls { background-color: #ff0000; }
.cls:hover { background-color: #0000ff; }

当javascript 我愿意：

mydiv.style.backgroundColor = "#555555";

它有效，但悬停不再有效！

我在网上没有找到很多关于这种行为的信息，正常吗？

如何解决可能是另一个问题，但如果你想告诉...

【问题讨论】：

你能添加你的html代码吗？
这很正常 - 请参阅 this documentation 了解原因
一个简单的解决方法是在悬停背景颜色上设置 !important 标志

标签： javascript html css hover

【解决方案1】：

非常有趣，虽然这是一种奇怪的行为。

var elem = document.getElementsByClassName("cls")[0];
elem.style.backgroundColor = "yellow"; // It'll become inline property

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

.cls:hover { background-color: #0000ff; }

&lt;div class="cls"&gt;&lt;/div&gt;

当我们从 Javascript 应用 background-color 时，它会变成内联属性并优先于其他属性，甚至会覆盖 hover 效果中的 background-color。

对于 POC，请查看此

.cls {
  width: 100px;
  height: 100px;
   background-color: #ff0000; }
.cls:hover { background-color: #0000ff; }

&lt;div class="cls" style="background-color: yellow"&gt;&lt;/div&gt;

现在，我正在从inline 应用background-color，并且这里它的优先级高于css 样式。

解决此问题的方法是，在hover

上添加 !important

var elem = document.getElementsByClassName("cls")[0];
elem.style.backgroundColor = "yellow";

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

.cls:hover { background-color: #0000ff !important; }

&lt;div class="cls"&gt;&lt;/div&gt;

更新

正如@Mr_Green 所说，添加!important 属性不是最佳实践，相反我们可以再添加一个类也可以解决您的问题。

var elem = document.getElementsByClassName("cls")[0];
elem.classList.add('secondary');

.cls {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

.secondary {
  background-color: #000000;
}

.secondary:hover {
  background-color: #0000ff;
}

&lt;div class="cls"&gt;&lt;/div&gt;

希望这会有所帮助:)

【讨论】：

是的，这对我来说很奇怪，因为我一直认为伪类样式会先于内联样式。解决方案不是使用 !important 来处理伪类样式，而是动态添加一个单独的类来保存样式。
@Jackt classList IE9 及更早版本不支持

【解决方案2】：

检查 sn-p 。它的工作

var myDiv = document.querySelectorAll('.cls')[0];
myDiv.style.background='green'

.cls{ background-color: #ff0000; height:100px; width:100px; }
.cls:hover { background-color: #0000ff !important; }

   

 <div class="cls">
</div>

【讨论】：

【解决方案3】：

使用 javascript 更改背景颜色将覆盖该元素的样式。

如果你真的想用javascript添加悬停效果可以参考这篇文章：Change :hover CSS properties with JavaScript

我建议您对这些类型的代码使用 JQuery。

【讨论】：

【解决方案4】：

可能会添加 onmouseenter、onmouseleave 事件监听器来实现悬停。

【讨论】：

【解决方案5】：

我认为它会起作用在 Javascript 中为 mydiv 提供类 'cls2' 和

.cls:not(.cls2) { background-color: #ff0000; }
.cls2 { background-color:#555555; }
.cls:hover { background-color: #0000ff; }

【讨论】：

【解决方案6】：

当您从 javascript 中提供 background-color 时，它被应用为内联样式，如果您想提供悬停效果，请对其应用 !important。 p>

.cls { background-color: #ff0000; }
.cls:hover { background-color: #0000ff !important; }

【讨论】：