基于jQuey实现鼠标滑过变色(整行变色)
更新时间：2015年12月07日 14:36:10 作者：我是代码努力
相信大家在一些网站都看到过这种效果吧，当鼠标放在新闻列表一行的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择
在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择。
废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.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代码。
以上代码也很简单，大家有哪里不清楚的地方欢迎给我留言，我会及时给大家答复的，同时感谢大家一直以来对脚本之家网站的支持。
相关文章
本文给大家分享的是一则使用jQuery获得内容以及内容的属性的方法和示例，非常实用，推荐给大家。2015-02-02
超简单的jquery的AJAX用法,需要的朋友可以参考下。2010-05-05
下面小编就为大家带来一篇Spring MVC中Ajax实现二级联动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
本文主要介绍了jquery获取下拉框中的循环值的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Jquery 动态添加元素并添加点击事件实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl2014-08-08
一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BUG了，这个自行测试就知道了。2011-06-06
这篇文章介绍了jQuery遍历节点元素的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
jQuery库中包括很多函数,所以开发插件的时候往往就需要注意命名空间和私有作用域等方面,下面就由Shawn Khameneh老司机带你解读jQuery插件开发流程及相关注意点.2016-05-05
这篇文章主要介绍了8款超赞的jQuery评分插件，推荐给大家，有需要的小伙伴可以参考下2015-08-08
最新评论