首页 > 代码库 > JQuery入门——事件切换之hover()方法介绍

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

2024-11-13 16:42:39   202人阅读

所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换,有两个方法用于事件的切换，一个方法是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

 

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


联系
我们