基于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自带的getSrcript文件只能动态加载js代码，但不能加载css，后来自己写了一个可加载js与css的程序2014-10-10
这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法2013-06-06
这篇文章主要介绍了jQuery实现的Div窗口震动效果,可实现点击提交后窗口出现震动效果,需要的朋友可以参考下2015-08-08
jquery插件丰富，很多都是很好用的，最近学习了一下如何制作jquery插件，发现jquery插件制作其实很简单，这里介绍一下。2010-06-06
使用jquery数组可以存放checkbox全选值，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
这篇文章主要为大家介绍了如何利用JQuery实现相邻item焦点移动的效果，文中的示例代码讲解详细，对我们学习前端知识有一定的帮助，感兴趣的可以学习一下2022-04-04
别踩白块是一款简单易上手的数字小游戏,下面这篇文章主要给大家介绍了关于使用jquery实现别踩白块小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候，手风琴（Accordion）效果就显得非常有用，它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架，只需很少的代码就可以实现精美的手风琴效果，帮助你的网站吸引更多用户的眼球2012-08-08
这篇文章主要介绍了jQuery+ajax实现文章点赞功能的方法,涉及jQuery基于ajax无刷新post提交实现点赞功能的具体步骤与相关技巧,需要的朋友可以参考下2015-12-12
下面与大家分享下两种方法设置disabled属性以及三种方法移除disabled属性，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
最新评论