js控制hover的样式，原创
2019-04-19 本文已影响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的样式。
