Javascript:通过 .style 在悬停时设置元素颜色

Question

我正在用 Javascript 动态编写 CSS。我试图指定(在 Javscript 中)当鼠标悬停在段落元素上时，其文本颜色会发生变化。

有没有办法做到这一点而不必诉诸 onMouseOver 方式，比如......

myEle.style.colorHover = "#FFFFFF";

// Maybe this works?
var ele = document.createElement("p");
ele.style.colorHover = "#FFFFFF";
ele.style.backgroundColorHover = "#000000";
ele.style.color = "#000000";
ele.style.backgroundColor = "#FFFFFF";

Answer 1

只需将您的文本包裹在一个额外的 A 标签中，然后使用 :hover 更改文本的颜色。

当然，您可能希望创建一个类并通过 JavaScript 添加它。

JavaScript:

ele.setAttribute("class", "myClass");

CSS:

P A.myClass
{
 /* colors when not hovering */   
}
P A.myClass:hover
{
 /* colors when hovering */
}