Jquery的hover方法让鼠标经过li时背景变色
更新时间：2013年09月06日 11:19:27 作者：
鼠标经过时让li背景变色，在某些时候还是挺实用的，下面为大家介绍下使用Jquery的hover方法来实现下，感兴趣的朋友可以参考下
复制代码 代码如下:
<!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实现的鼠标单击出现水波特效。用鼠标点击页面,你可以看到页面不断出面水波纹效果。然后水波纹渐渐消失。效果非常不错2016-04-04
这篇文章主要介绍使用jQuery给input标签设置默认值的方法，实例讲解，非常实用，需要的朋友可以参考下。2016-06-06
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
这篇文章主要介绍了使用jquery.validate自定义方法实现"手机号码或者固定电话"的逻辑验证，解决了手机号码或者固定电话字至少填写一个的验证问题，分享给大家2014-09-09
这篇文章主要介绍了Jquery通过Ajax访问XML数据，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以参考下2014-09-09
这篇文章主要为大家详细介绍了jquery实现限制textarea输入字数的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
基于Jquery的淡入淡出的特效基础练习实现代码，学习jquery的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery Ajax请求后台数据并在前台接收的相关资料,需要的朋友可以参考下2016-12-12
jquery+html5时钟特效代码分享（可设置闹钟并且语音提醒）
这篇文章主要为大家详细介绍了Jquery+html5可设置闹钟并且会语音提醒的时钟特效，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下2015-08-08
JQuery使用index方法获取Jquery对象数组下标的方法
这篇文章主要介绍了JQuery使用index方法获取Jquery对象数组下标的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以参考下2015-05-05
最新评论