所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是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
实践了下：
-
1 <body> 2 <div class="cont"> 3 <div class="parent"> 4 <div class="hover"></div> 5 </div> 6 </div> 7 </body>
-
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事件
-
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事件
-
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事件
-
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