【jquery】hover方法

2020-12-13 02:48

阅读:584

标签:style   blog   class   code   java   ext   

  方法名称:hover(over, out)

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

  参数:

    1) overFunction

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

    2) outFunction

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

  例子:

soscw.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>QQth>
32     th>Emailth>
33   tr>
34 thead>
35 tbody>
36   tr>
37     td>AAAAtd>
38     td>20td>
39     td>1111td>
40     td>aaaa@gmail.comtd>
41   tr>
42   tr>
43     td>BBBBtd>
44     td>21td>
45     td>2222td>
46     td>bbbb@gmail.comtd>
47   tr>
48   tr>
49     td>CCCCtd>
50     td>22td>
51     td>333td>
52     td>cccc@gmail.comtd>
53   tr>
54 tbody>
55 table>
56 body>
57 html>
58 html>
soscw.com,搜素材

效果图:

soscw.com,搜素材

 

【jquery】hover方法,搜素材,soscw.com

【jquery】hover方法

标签:style   blog   class   code   java   ext   

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


评论


亲,登录后才可以留言!