使用 JavaScript 更改 :hover CSS 属性

新手上路,请多包涵

JavaScript 如何改变 CSS :hover 属性?

例如:

HTML

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

CSS

table td:hover {
background:#ff0000;
}

如何使用 JavaScript 将 td :hover 属性修改为 background:#00ff00 ?我知道我可以使用 JavaScript 访问样式背景属性:

document.getElementsByTagName("td").style.background="#00ff00";

但我不知道 .style:hover JavaScript 等价物。

原文由 zdebruine 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 2.4k
2 个回答

:hover 这样的伪类从不引用元素,而是引用任何满足样式表规则条件的元素。您需要 _编辑样式表规则_、 追加新规则 或添加包含新 :hover 规则的新样式表。

 var css = 'table td:hover{ background-color: #00ff00 }';
 var style = document.createElement('style');

 if (style.styleSheet) {
 style.styleSheet.cssText = css;
 } else {
 style.appendChild(document.createTextNode(css));
 }

 document.getElementsByTagName('head')[0].appendChild(style);

原文由 kennebec 发布,翻译遵循 CC BY-SA 3.0 许可协议

不能通过 Javascript 更改或更改实际的 :hover 选择器。但是,您可以使用 mouseenter 更改样式,然后恢复为 mouseleave (谢谢,@Bryan)。

原文由 Achal Dave 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题