眾所周知,js是無(wú)法控制hover的樣式的,
因?yàn)楣P者之前想過(guò)用服務(wù)器渲染實(shí)現(xiàn),然后突來(lái)靈感。
查看演示
demo下載鏈接
上代碼:
<body>
<div id="colorContainer"></div>
<h1>鼠標(biāo)浮上去換顏色</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樣式,其實(shí)就是將新的hover的css樣式(權(quán)重最高的)放到了一個(gè)容器里,從而實(shí)現(xiàn)了任意改變hover的樣式。