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";
但我不知道的.styleJavaScript的等价物:hover。
伪类: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（谢谢，@Bryan）。
您可以做的是更改对象的类并定义两个具有不同悬停属性的类。例如：
.stategood_enabled:hover { background-color:green}
.stategood_enabled { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled { background-color:black}
这是我在以下内容中发现的： 使用 JavaScript 更改元素的类
function changeClass(object,oldClass,newClass)
{
// remove:
//object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
// replace:
var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
object.className = object.className.replace( regExp , newClass );
// add
//object.className += " "+newClass;
}
changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");
很老的问题，所以我想我会添加一个更现代的答案。现在 CSS 变量得到了广泛的支持，它们可以用来实现这一点，而无需 JS 事件或!important.
以 OP 为例：
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
我们现在可以在 CSS 中做到这一点：
table td:hover {
// fallback in case we need to support older/non-supported browsers (IE, Opera mini)
background: #ff0000;
background: var(--td-background-color);
}
并使用 javascript 添加悬停状态，如下所示：
const tds = document.querySelectorAll('td');
tds.forEach((td) => {
td.style.setProperty('--td-background-color', '#00ff00');
});
很抱歉发现这个页面晚了 7 年，但这里有一个更简单的方法来解决这个问题（任意更改悬停样式）：
HTML：
<button id=Button>Button Title</button>
CSS：
.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}
JavaScript：
var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');