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


Posted in Javascript onDecember 07, 2015

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.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代码。

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

Javascript 相关文章推荐
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
js实现遍历含有input的table实例
Dec 07 #Javascript
JavaScript中的return语句简单介绍
Dec 07 #Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 #Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 #Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 #Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 #Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 #Javascript
You might like
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php目录拷贝实现方法
2015/07/10 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
让您的菜单不离网站
2006/10/03 Javascript
javascript学习网址备忘
2007/05/29 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python生成随机密码的方法
2017/06/16 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python 星号(*)的多种用途
2020/09/21 Python
ASP.NET Core中的配置详解
2021/02/05 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
中间件的定义
2016/08/09 面试题
个人函授自我鉴定
2014/03/25 职场文书
战略合作协议书范本
2014/04/18 职场文书
全国文明单位申报材料
2014/05/31 职场文书
任命书怎么写
2014/06/04 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
于丹论语心得观后感
2015/06/15 职场文书