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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
uni-app微信小程序登录授权的实现
May 22 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调用Java对象的方法
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
删除重复数据的算法
2006/11/23 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python文件的md5加密方法
2016/04/06 Python
python运行其他程序的实现方法
2017/07/14 Python
深入理解Django的中间件middleware
2018/03/14 Python
django最快程序开发流程详解
2019/07/19 Python
简单了解django orm中介模型
2019/07/30 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Python中私有属性的定义方式
2020/03/05 Python
jupyter 导入csv文件方式
2020/04/21 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
公共事业管理本科生求职信
2013/10/07 职场文书
团员个人的自我评价
2013/12/02 职场文书
文明城市标语
2014/06/16 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
项目负责人岗位职责
2015/02/15 职场文书
社区工作者个人总结
2015/02/28 职场文书