基于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 相关文章推荐
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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做推送服务端实现ios消息推送
2013/07/01 PHP
php动态生成函数示例
2014/03/21 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PDO::query讲解
2019/01/29 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
Python continue语句用法实例
2014/03/11 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python学习入门之区块链详解
2017/07/25 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python3实现猜数字游戏
2020/12/07 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
软件工程专业推荐信
2013/10/28 职场文书
校长先进事迹材料
2014/02/01 职场文书
校本教研活动总结
2014/07/01 职场文书
白酒营销策划方案
2014/08/17 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
年度考核表个人总结
2015/03/06 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
Django框架中表单的用法
2022/06/10 Python