美文网首页让前端飞Web前端之路
js控制hover的样式,原创

js控制hover的样式,原创

作者: 李佳明先生 | 来源:发表于2019-04-19 13:46 被阅读48次

众所周知,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的样式。

本文章属于个人原创,转载请注明出处。

相关文章

网友评论

    本文标题:js控制hover的样式,原创

    本文链接:https://www.haomeiwen.com/subject/zseqgqtx.html