Javascript backgroundColor确实删除了css悬停？

Question

我的div有课：

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

当我使用javascript ：

mydiv.style.backgroundColor = "#555555";

它有效，但悬停不再起作用了！

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

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

Answer 1

当你从javascript给出背景颜色时 ，它被应用为内联样式，如果你想给出悬停效果，那么应用！important对它很重要 。

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

Answer 2

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

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

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

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

对于POC，请看这个

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

 <div class="cls" style="background-color: yellow"></div> 

现在，我正在应用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; } 

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

UPDATE

正如@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; } 

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

希望这可以帮助 ：）

Answer 3

我认为在Javascript和Jydiv中将类'cls2'赋予mydiv是有用的

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

Answer 4

也许添加onmouseenter，onmouseleave事件监听器来实现悬停。

Answer 5

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

如果你真的想用javascript添加悬停效果你可以参考这篇文章： 更改：使用JavaScript悬停CSS属性

我建议你将JQuery用于这些类型的代码。

Answer 6

检查片段。 它的工作

 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>