本章节演示了如何通过定义标签的hover方法来实现一些特殊效果，比如鼠标滑过标签时改变标签的样式
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<!--引入jQuery-->
<script type="text/javascript" src="http://www.sharejs.com/software/jquery/jquery-1.3.2.min.js"></script>
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
$(document).ready(function() {
$("#orderedlist tbody tr").hover(function() {
$(this).addClass("blue");
}, function() {
$(this).removeClass("blue");
});
});
</script>
<style>
.blue {
background:#bcd4ec;
}
</style>
在网页<body>区添加以下代码
<table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0">
<thread>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td><a href="http://www.sharejs.com">sharejs.com</a></td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
<tr>
<td>sharejs.com</td>
<td>23</td>
<td>432432</td>
<td>rewrew@sohu.com</td>
</tr>
</tbody>
</table>
