Jquery的hover方法让鼠标经过li时背景变色


Posted in Javascript onSeptember 06, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>StripingTable</title> 
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script> 
<!--将jQuery引用进来--> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#orderedlist tbody tr").hover(function() { 
// $("#orderedlist li:last").hover(function() { 
$(this).addClass("blue"); 
}, function() { 
$(this).removeClass("blue"); 
}); 
}); 
</script> 
<style> 
.blue { 
background:#bcd4ec; 
} 
</style> 
</head> 
<body> 
<table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<!--用class="stripe"来标识需要使用该效果的表格--> 
<thead> 
<tr> 
<th>姓名</th> 
<th>年龄</th> 
<th>QQ</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

Jquery的hover方法让鼠标经过li时背景变色
Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
php与js的区别是什么
Aug 05 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 #Javascript
JS远程获取网页源代码实例
Sep 05 #Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 #Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 #Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 #Javascript
js编码、解码函数介绍及其使用示例
Sep 05 #Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 #Javascript
You might like
PHP实现微信申请退款功能
2018/10/01 PHP
jQuery live
2009/05/15 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
jQuery实现的分页插件完整示例
2020/05/26 jQuery
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python将list转为matrix的方法
2018/12/12 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
关于Django Models CharField 参数说明
2020/03/31 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
过滤器的用法
2013/10/08 面试题
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
cf收人广告词大全
2014/03/14 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
教师素质教育心得体会
2016/01/19 职场文书
合作意向书怎么写
2019/06/24 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android