你的位置:首页 > Java教程

[Java教程]如何实现鼠标滑过整行变色


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

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><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代码。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5806

更多内容可以参阅:http://www.softwhy.com/jquery/