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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
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生成扭曲及旋转的验证码图片
2013/06/07 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
python插入排序算法的实现代码
2013/11/21 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python3爬取各类天气信息
2018/02/24 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
详解Flask前后端分离项目案例
2020/07/24 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
作风建设演讲稿
2014/05/23 职场文书
新闻学专业求职信
2014/07/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书