基于jQuey实现鼠标滑过变色(整行变色)

时间：2021-05-25

在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择。

废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="https:///" /><title></title><style type="text/css">ul,li{ list-style:none; font-size:12px;}li{ width:250px; height:25px; line-height:25px;}.hover{ background-color:#666;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ jQuery.hoverPlugin={ hover:function(selector){ $(selector).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); } }; $.hoverPlugin.hover(".mytest li");});</script></head><body><ul class="mytest"> <li>1.俄罗斯爆发陨石雨，导致上千人受伤</li> <li>2.朝鲜成功进行核试验，半岛无核进程终结</li> <li>3.中国进入春运高峰期</li></ul></body></html>

以上代码实现了所需功能，尽管不够美观，可以根据实际需求自行修改。实现的方法也非常的简单，就是利用hover()方法为hover事件绑定两个事件处理函数，以添加或者删除设置li元素背景颜色的CSS代码。

以上代码也很简单，大家有哪里不清楚的地方欢迎给我留言，我会及时给大家答复的，同时感谢大家一直以来对网站的支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章