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