编程 Javascript

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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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