更改：将 CSS 属性与 JavaScript 悬停在一起

javascript html css dhtml

2022-08-30 04:14:29

JavaScript如何改变CSS属性？:hover

例如：

断续器

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

断续器

table td:hover {
background:#ff0000;
}

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

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

但是我不知道有哪个 JavaScript 等同于 ..style:hover

答案 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);

答案 2

您无法通过Javascript更改或更改实际的选择器。但是，您可以使用 mouseenter 更改样式，然后恢复为 mouseleave（谢谢，@Bryan）。:hover

更改 ：将 CSS 属性与 JavaScript 悬停在一起

更改：将 CSS 属性与 JavaScript 悬停在一起