所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是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时控制台输出：
1
2
② 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时控制台输出：
1
2
③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 });
鼠标第一次移入.parent div时，控制台输出：
1
2
1
移出时，输出：
2
这个就是传说中的冒泡事件了，才会在第一次移入.parent div时有两个1 出现，
第一个1是进入.parent div时触发的事件；
第二个1是进入.hover div时发生的mouseover事件向上冒泡到.parent div 触发的；
最后为什么木有两个2出现啊 冒泡吖~
这是因为最后移出时只是在.hover上发生的，有冒泡了，.parent 的移出在.hover的显示之前发生了，即第一个2