方法名称:hover(over, out)
概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
参数:
1) overFunction
鼠标移到元素上要触发的函数
2) outFunction
鼠标移出元素要触发的函数
例子:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>鼠标滑过效果</title>
6 <script src="https://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function() {
9 //$("#orderedlist tbody tr").css("text-align","center");
10 $("#orderedlist tbody tr").css({"text-align":"center"});
11 $("#orderedlist tbody tr").hover(function() {
12 $(this).addClass("blue");
13 }, function() {
14 $(this).removeClass("blue");
15 });
16 });
17 </script>
18 <style>
19 .blue {
20 background:#bcd4ec;
21 cursor:pointer;
22 }
23 </style>
24 </head>
25 <body>
26 <table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0">
27 <thead>
28 <tr>
29 <th>姓名</th>
30 <th>年龄</th>
31 <th>QQ</th>
32 <th>Email</th>
33 </tr>
34 </thead>
35 <tbody>
36 <tr>
37 <td>AAAA</td>
38 <td>20</td>
39 <td>1111</td>
40 <td>aaaa@gmail.com</td>
41 </tr>
42 <tr>
43 <td>BBBB</td>
44 <td>21</td>
45 <td>2222</td>
46 <td>bbbb@gmail.com</td>
47 </tr>
48 <tr>
49 <td>CCCC</td>
50 <td>22</td>
51 <td>333</td>
52 <td>cccc@gmail.com</td>
53 </tr>
54 </tbody>
55 </table>
56 </body>
57 </html>
58 </html>
效果图: