我如何使用 :hover 更改使用 javascript 创建的元素属性？

Question

我有一个用 javascript 创建的元素（在本例中它是 div 元素）。 Javascript 也用于设置元素背景颜色的样式。当我这样做时，css :hover 元素更改背景颜色不起作用。

script.js

box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = "red";
document.body.appendChild(box);

style.css

.box {
    width:100px;
    height:100px;
}

.box:hover {
    background-color: green;  /*doesn't work*/
}

经过测试，我发现使用js应用背景色同时抵消了背景色的css和:hover中的背景色css。 :hover 中定义的其他属性确实有效，但前提是在使用 js 创建元素期间尚未定义。

我正在寻找能够使用 js 创建任何颜色的 div 元素并在悬停时将颜色更改为绿色的解决方案（它不一定必须与 css).

Answer 1

这样：

你的代码没有，因为 html 元素样式属性优先于 css

box = document.createElement("div");
box.className = "box";
 
document.body.appendChild(box);

.box {
  width            : 100px;
  height           : 100px;
  background-color : red;
  }

.box:hover {
  background-color : green;   
  }

Answer 2

!important 覆盖其他样式：

box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = "red";
document.body.appendChild(box);

.box {
    width:100px;
    height:100px;
}

.box:hover {
    background-color: green !important;  
}

How can I use :hover to change element properties which were created with javascript?