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

Question

我有这样的代码：

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

我想访问

#myDiv:hover

更改背景颜色。

肯定有办法做到这一点吗？！

感谢您的宝贵时间，

安德烈

Answer 1

你可以这样做：

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

    }
    #myDiv:hover {
        background-color: var(--hover_background_color);
    }

然后在js上

document.querySelector("#myDiv").style.setProperty('--hover_background_color', "blue");