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中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Javascript地址引用代码实例解析
Feb 25 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
javascript中的隐式调用
2018/02/10 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
详解Vue This$Store总结
2018/12/17 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python 变量类型详解
2018/10/10 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
党员个人剖析材料2014
2014/10/08 职场文书
工伤事故证明
2014/10/20 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
大学军训决心书
2015/02/05 职场文书
工地食品安全责任书
2015/05/09 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
python基础之文件操作
2021/10/24 Python