js控制hover的样式,原创
众所周知,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的样式。
本文章属于个人原创,转载请注明出处。
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js控制hover的样式,原创
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » js控制hover的样式,原创