js控制hover的样式,原创

众所周知,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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞