JQuery入门——事件切换之hover()方法介绍

所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是hover()，另一个是toggle(),感兴趣的朋友不妨了解下,或许对你有所帮助。

1、在JQuery中，有两个方法用于事件的切换，一个方法是hover()，另一个是toggle()。所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发一个事件，可以用切换事件轻松实现。

2、示例代码：

代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2 <html xmlns="http://www.w3.org/1999/xhtml"> 
 3 <head> 
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 5 <title>切换事件hover</title> 
 6 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
 7 <script type="text/javascript"> 
 8 $(function(){ 
 9 $(".clsTitle").hover(function(){ 
10 $(".clsContent").show(); 
11 }, 
12 function(){ 
13 $(".clsContent").hide(); 
14 }) 
15 }) 
16 </script> 
17 </head> 
18 
19 <body> 
20 <div class="clsTitle">JQuery简介</div> 
21 <div class="clsContent">JQuery是由美国人John Resig于2006年创建的一个开源项目，它的主旨是：以更少的代码，实现更多的功能</div> 
22 </body> 
23 </html>

 

3、效果图预览：

 


当鼠标移动到JQuery简介时：

 

二、应用实例

  • jQuery打造鼠标经过时的Hover效果，当鼠标滑过时，对应的表格行会添加背景色，以着重显示相应内容。
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>jQuery hover特效</title>
 6 <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script> 
 7 <script type="text/javascript">
 8 $(document).ready(function() {
 9 $("#orderedlist tbody tr").hover(function() {
10     // $("#orderedlist li:last").hover(function() {
11         $(this).addClass("blue");
12     }, function() {
13         $(this).removeClass("blue");
14     });
15 });
16 </script>
17 <style>
18 .blue {
19         background:#bcd4ec;  
20 }
21 </style>
22 </head>
23 <body>
24 <table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0"> 
25 <!--用class="stripe"来标识需要使用该效果的表格-->
26 <thead>
27   <tr>
28     <th>姓名</th>
29     <th>年龄</th>
30     <th>QQ</th>
31     <th>Email</th>
32   </tr>
33 </thead>
34 <tbody>
35   <tr>
36     <td>邓国梁</td>
37     <td>23</td>
38     <td>31540205</td>
39     <td>gl.deng@gmail.com</td>
40   </tr>
41   <tr>
42     <td>***</td>
43     <td>23</td>
44     <td>31540205</td>
45     <td>gl.deng@gmail.com</td>
46   </tr>
47   <tr>
48     <td>奥巴马</td>
49     <td>23</td>
50     <td>31540205</td>
51     <td>gl.deng@gmail.com</td>
52   </tr>
53 </tbody>
54 </table>
55 </body>
56 </html>

 

三、另外从hover延伸出  mouseout  , mouseout , mouseenter  ,  mouseleave.

一直对mouseover， mouseout和mouseenter， mouseleave还有hover之间的区别很联系总是模模糊糊的~这回真去认真比对了下~

     mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件
     mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件
     mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件
     mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件
     hover！= mouseover+mouseout
     hover=mouseenter + mouseleave

 

实践了下：

[html] 
  1. 1 <body>  
2     <div class="cont">  
3         <div class="parent">  
4             <div class="hover"></div>  
5         </div>  
6     </div>  
7 </body>
[css]
  1.  1 .cont{  
 2     position: relative;  
 3     margin :0 auto;  
 4     width:100px;  
 5     height: 100px;  
 6 }  
 7 .parent{  
 8     position: relative;  
 9     width:100px;  
10     height: 100px;  
11     background: pink;  
12 }  
13 .hover{  
14     position: absolute;  
15     top:0;  
16     left: 0;  
17     width:100px;  
18     height: 100px;  
19     background: #ccc;  
20     display: none;  
21   
22 }

     

① hover事件

[javascript] 
  1. 1 $(".parent").hover(function(){  
2     $(".hover").css("display","block");  
3     console.log("1")  
4 },function(){  
5     $(".hover").css("display","none");  
6     console.log("2")  
7   
8 });

鼠标移入移出.parent div时控制台输出：

1

2

② mouseenter 和mouseleave事件

[javascript] 
  1. 1 $(".parent").mouseenter(function(){  
2         $(".hover").css("display","block");  
3         console.log("1")  
4     });  
5 $(".parent").mouseleave(function(){  
6         $(".hover").css("display","none");  
7         console.log("2")  
8 });

鼠标移入移出.parent div时控制台输出：

 

1

2

③mouseover和mouseout事件

[javascript]
 
  1. 1 $(".parent").mouseover(function(){  
2         $(".hover").css("display","block");  
3         console.log("1")  
4     });  
5 $(".parent").mouseout(function(){  
6         $(".hover").css("display","none");  
7         console.log("2")  
8 });

鼠标第一次移入.parent div时，控制台输出：

1

2

1

移出时，输出：

2

这个就是传说中的冒泡事件了，才会在第一次移入.parent div时有两个1 出现，

第一个1是进入.parent div时触发的事件；

第二个1是进入.hover div时发生的mouseover事件向上冒泡到.parent div 触发的；

最后为什么木有两个2出现啊 冒泡吖~

这是因为最后移出时只是在.hover上发生的，有冒泡了，.parent 的移出在.hover的显示之前发生了，即第一个2

 

posted @ 2015-01-22 20:09  wanwet  阅读(936)  评论(0)  编辑  收藏  举报