js控制hover的樣式,原創(chuàng)

眾所周知,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的樣式。

本文章屬于個(gè)人原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容