js 关于如何动态设置css的hover样式最佳方式，设置hover样式

效果图：

动态设置css的hover样式？

网上很多方式都是采用js监听dom的鼠标移入（onmouseover）移出（onmouseout）事件，进行控制这个dom的hover样式。消耗性能先不说，代码也很庞大，再加上如果是自定义主题（修改后能立马看到效果的，不是需要刷新）的功能可能就更麻烦了，要给所有的dom都绑定这样的事件。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --color:#aaa;
        }
        .btn{
            cursor: pointer;
            display: inline-block;
            padding: 10px 40px;
            color:white;
            background: blue;
            border-radius: 8px;
        }
        .btn:hover{
            background: var(--color);
        }
    </style>
</head>
<body>
    <div id="btn" class="btn">点击后悬浮效果变化</div>
</body>
</html>
<script>
document.getElementById('btn').addEventListener('click',function(){
    document.body.style.setProperty('--color', '#FF6155');
});
</script>