基于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中的函数
Jan 22 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
javascript实现完美拖拽效果
May 06 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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启动时候提示PHP startup的解决方法
2013/05/07 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
javascript第一课
2007/02/27 Javascript
JS 建立对象的方法
2007/04/21 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python回调函数的使用方法
2014/01/23 Python
Python列表计数及插入实例
2014/12/17 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
详解python进行mp3格式判断
2016/12/23 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
weblogic面试题
2016/03/07 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
商务英语广告词大全
2014/03/18 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
财务工作失误检讨书
2015/02/19 职场文书
恰同学少年观后感
2015/06/08 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang