Question

我的div有课：

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

我在javascript时：

mydiv.style.backgroundColor = "#555555";

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

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

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

Answer 1

当你从javascript中提供 background-color 时，它会被应用为内联样式，如果你想提供悬停效果，则将！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时，它将成为内联属性并优先于其他属性，甚至从background-color效果覆盖hover。

对于POC，请看这个

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

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

现在，我正在应用background-color中的inline，此处它还优先于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>

<强>更新

正如@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中将类'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添加悬停效果，你可以参考这篇文章：Change :hover CSS properties with JavaScript

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

Answer 6

检查代码段。它的工作

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

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

2016-11-22 12:04 PM

Javascript backgroundColor确实删除了css悬停？

6 个答案: