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

浏览数：38 / 时间：2015年06月09日

所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是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>[email protected]</td>
40   </tr>
41   <tr>
42     <td>温家宝</td>
43     <td>23</td>
44     <td>31540205</td>
45     <td>[email protected]</td>
46   </tr>
47   <tr>
48     <td>奥巴马</td>
49     <td>23</td>
50     <td>31540205</td>
51     <td>[email protected]</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 <body>  
2     <div class="cont">  
3         <div class="parent">  
4             <div class="hover"></div>  
5         </div>  
6     </div>  
7 </body>

[css]

 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 $(".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时控制台输出：

② mouseenter 和mouseleave事件

[javascript]

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时控制台输出：

③mouseover和mouseout事件

[javascript]

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 });