js控制hover的样式，原创

2023年12月15日 470次阅读 来源: 李佳明先生

众所周知，js是无法控制hover的样式的，
因为笔者之前想过用服务器渲染实现，然后突来灵感。
查看演示
demo下载链接
上代码：

<body>
<div id="colorContainer"></div>
<h1>鼠标浮上去换颜色</h1>
<ul>
    <li>red</li>
    <li>green</li>
    <li>blue</li>
</ul>
<script>
    $(function () {
        $('ul li').on('click',function () {
            $('#colorContainer').html('').append("<style>\n" +
                "        h1:hover{\n" +
                "            color: "+$(this).text()+" !important;\n" +
                "        }\n" +
                "    </style>")
        })
    })

</script>
</body>

本方法用了重置css样式，其实就是将新的hover的css样式（权重最高的）放到了一个容器里，从而实现了任意改变hover的样式。

本文章属于个人原创，转载请注明出处。
    原文作者：李佳明先生
    原文地址: https://www.jianshu.com/p/009eaee59582
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞