怎样使用JavaScript悬停CSS属性?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (43)

我需要找到一种方法来改变CSS:使用JavaScript的悬停属性。

例如,假设我有这个HTML代码:

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

和下面的CSS代码:

table td:hover {
background:#ff0000;
}

我想使用JavaScript将<td> hover属性更改为背景:#00ff00。知道我可以使用JavaScript访问样式背景属性:

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

但我不知道一个与JavaScript相当的:悬停。我如何更改这些<td>:使用JavaScript悬停背景?

提问于
用户回答回答于

伪classes: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);
用户回答回答于

你不能改变或改变实际:hover通过JavaScript选择。但是,可以使用它mouseenter来更改样式,然后恢复mouseleave。

扫码关注云+社区

领取腾讯云代金券