基于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 07 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
js实现日期级联效果
Jan 23 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP学习笔记之session
2018/05/06 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Python实现Linux监控的方法
2019/05/16 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
早会主持词
2014/03/17 职场文书
教师节表彰会主持词
2015/07/06 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis