小编典典

使用JavaScript更改:hover CSS属性

javascript

我需要找到一种使用JavaScript更改CSS:hover属性的方法。

例如,假设我有以下HTML代码:

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

以及以下CSS代码:

table td:hover {
background:#ff0000;
}

我想使用JavaScript将悬停属性更改为例如background:#00ff00。知道我可以使用JavaScript通过以下方式访问样式背景属性:

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

但是我不知道:hover的JavaScript等效项。如何使用JavaScript更改这些的:hover背景?

非常感谢您的帮助!


阅读 1562

收藏
2020-05-01

共1个答案

小编典典

伪类: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);
2020-05-01