码迷,mamicode.com
首页 > Web开发 > 详细

【jquery】hover方法

时间:2014-05-10 22:57:07      阅读:530      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

  方法名称:hover(over, out)

  概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

  参数:

    1) overFunction

      鼠标移到元素上要触发的函数

    2) outFunction

      鼠标移出元素要触发的函数

  例子:

bubuko.com,布布扣
 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>
bubuko.com,布布扣

效果图:

bubuko.com,布布扣

 

【jquery】hover方法,布布扣,bubuko.com

【jquery】hover方法

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/ningvsban/p/3720718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!