首页 > 代码库 > 【jquery】hover方法

【jquery】hover方法

2024-07-03 23:28:11   227人阅读

　　方法名称：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="http://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>

效果图：

 


联系
我们