如何使用JavaScript修改HTML元素的CSS伪类样式？

你的现有代码 #

JavaScript代码：

const myDiv = document.querySelector("#myDiv");
myDiv.addEventListener("click", fct_Div);

function fct_Div(ev) {
    console.log(ev);
    if (ev.altKey === true) {
        myDiv.style["background-color"] = "blue";
    }
}

CSS代码：

#myDiv {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
#myDiv:hover {
    background-color: lightblue;
}

方法一：直接修改静态CSS样式 #

这是最直接的方式，找到你CSS里的#myDiv:hover规则，直接替换background-color的值即可，比如改成粉色：

#myDiv:hover {
    background-color: pink;
}

方法二：通过JavaScript动态修改hover样式 #

如果需要在代码运行过程中动态调整hover颜色，可采用以下两种方式：

方式A：插入新CSS规则覆盖原有样式

// 获取页面第一个样式表（可根据实际调整索引）
const styleSheet = document.styleSheets[0];
// 插入新的hover规则，优先级会覆盖原有规则
styleSheet.insertRule('#myDiv:hover { background-color: purple; }', styleSheet.cssRules.length);

方式B：定位并修改已有CSS规则

// 遍历样式表找到目标hover规则
for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) {
    const rule = document.styleSheets[0].cssRules[i];
    if (rule.selectorText === '#myDiv:hover') {
        rule.style.backgroundColor = 'green';
        break;
    }
}

方法三：用CSS类切换实现动态hover效果 #

这种方式更灵活，适合需要根据不同状态切换hover样式的场景：

1. 先在CSS中定义多个hover类：

#myDiv {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}
/* 默认hover样式 */
.hover-default:hover {
    background-color: lightblue;
}
/* 自定义hover样式1 */
.hover-pink:hover {
    background-color: pink;
}
/* 自定义hover样式2 */
.hover-darkblue:hover {
    background-color: darkblue;
}

2. 在JavaScript中通过切换类来改变hover效果：

function fct_Div(ev) {
    console.log(ev);
    if (ev.altKey === true) {
        // 移除默认hover类，添加自定义类
        myDiv.classList.remove('hover-default');
        myDiv.classList.add('hover-pink');
        // 保留原有点击后设置背景色的逻辑
        myDiv.style["background-color"] = "blue";
    }
}

内容的提问来源于stack exchange，提问作者Andreï Ch-J