zoukankan      html  css  js  c++  java
  • mouseover,mouseenter,mouseleave,mouseout

     mouseover和mouseout对应 //鼠标移入移出触发该元素及子元素

     mouseenter和mouseleave对应 //鼠标移入移出只触发该元素

    看完例子即可知道其区别:

    mouseover与mouseenter不同:

     1 <html>
     2 <head>
     3 <script type="text/javascript" src="/jquery/jquery.js"></script>
     4 <script type="text/javascript">
     5 x=0;
     6 y=0;
     7 $(document).ready(function(){
     8   $("div.over").mouseover(function(){
     9     $(".over span").text(x+=1);
    10   });
    11   $("div.enter").mouseenter(function(){
    12     $(".enter span").text(y+=1);
    13   });
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>
    19 <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>
    20 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left">
    21 <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
    22 </div>
    23 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right">
    24 <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>
    25 </div>
    26 </body>
    27 </html>

    mouseout mouseleave区别

     1 <html>
     2 <head>
     3 <script type="text/javascript" src="/jquery/jquery.js"></script>
     4 <script type="text/javascript">
     5 x=0;
     6 y=0;
     7 $(document).ready(function(){
     8   $("div.over").mouseout(function(){
     9     $(".over span").text(x+=1);
    10   });
    11   $("div.enter").mouseleave(function(){
    12     $(".enter span").text(y+=1);
    13   });
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 <p>不论鼠标指针移出被选元素或其子元素,都会触发 mouseout 事件。</p>
    19 <p>只有在鼠标指针移出被选元素时,才会触发 mouseleave 事件。</p>
    20 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left">
    21 <h2 style="background-color:white;">被触发的 mouseout事件:<span></span></h2>
    22 </div>
    23 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right">
    24 <h2 style="background-color:white;">被触发的 mouseleave事件:<span></span></h2>
    25 </div>
    26 </body>
    27 </html>
  • 相关阅读:
    HDU 5546 深搜吧 主要是提取的时候容易重复
    HDU 5543 新型01背包 两端放一半就可以有其价值
    HDU 2586 查找两点之间的距离
    HDU 5652 二分加搜索 http://acm.split.hdu.edu.cn/showproblem.php?pid=5652
    美句
    最短路径问题
    1766 装果子
    Watchcow
    codevs 4768 跳石头
    noi 7219:复杂的整数划分问题
  • 原文地址:https://www.cnblogs.com/MissBean/p/mouse.html
Copyright © 2011-2022 走看看