Javascript：通过.style在悬停时设置元素颜色答案

【问题标题】：Javascript: Set an elements color on hover through .styleJavascript：通过.style在悬停时设置元素颜色
【发布时间】：2011-11-19 22:26:01
【问题描述】：

我正在用 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";

【问题讨论】：

见 stackoverflow.com/questions/311052/… 或 stackoverflow.com/questions/714655/… - 这正是您要找的。span>
由于 IE 中缺乏对 hover 伪类的支持，悬停效果通常使用监听器来实现父元素上的 mouseover/out 事件（例如，在 tbody 上）或表格行的表格元素）。
如果您对页面上的超过 1 个元素执行此操作，我建议您使用 jQuery 和 hover() 处理程序 api.jquery.com/hover 可以更好地管理 IMO。

标签： javascript html css

【解决方案1】：

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

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

JavaScript：

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

CSS：

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

【讨论】：