鼠标滑过整行变色

快乐打工仔 分类:实例代码

很多网站有类似效果,当鼠标放在新闻列表一行上的时候,整行就会变色。

虽然使用CSS也能够实现此种功能,众多浏览器版本对于CSS3并没有良好的支持,使用jQuery实现此种功能是一个不错的选择。

代码实例如下:

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

鼠标滑过整行变色,这样的场景在实际项目中还是用的比较多的,关于鼠标滑过整行变色就介绍到这了。

鼠标滑过整行变色属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容