Html 使用 JavaScript 更改：hover CSS 属性

发布于07月07日

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";

但我不知道:hover的.style个JavaScript类似功能.

推荐答案

像:hover这样的伪类从不引用元素，而是引用满足样式表规则条件的任何元素.您需要添加edit the stylesheet rule、append a new rule或包含新: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);