信鸽网

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

  作者：bea

在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择。 废话不多说了，直接给大家贴jquery代码了，具体代码如下所示： <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name=

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


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




<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="/" />

<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代码。


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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: