• 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

  • 相关阅读:
    42 【docker】run命令
    41 【docker】初识
    37 【kubernetes】搭建dashboard
    36 【kubernetes】coredns
    34 【kubernetes】安装手册
    35 【kubernetes】configMap
    33 【kebernetes】一个错误的解决方案
    25 【python入门指南】如何编写测试代码
    26【python】sprintf风格的字符串
    24 【python入门指南】class
  • 原文地址:https://www.cnblogs.com/hl-520/p/4242561.html
走看看 - 开发者的网上家园