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 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
Vue中计算属性computed的示例解读
Jul 26 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python2.7安装图文教程
2018/03/13 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python二元表达式用法
2019/12/04 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python字典dict常用方法函数实例
2020/11/09 Python
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
师德师风事迹材料
2014/12/20 职场文书
雷峰塔导游词
2015/02/09 职场文书
python神经网络ResNet50模型
2022/05/06 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers