Mouseout在父級>子級上不起作用

我有這個完整的演示代碼。我想當鼠標懸停在綠色div上時顯示藍色div，並在鼠標移出綠色div時隱藏藍色div。問題是，當我將鼠標懸停在綠色並向上移動時，鼠標實際上不在綠色區域，但藍色不會消失。如何解決這個問題？Mouseout在父級>子級上不起作用

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(document).on({ 
      mouseover: function(e){ 
       $(".inner").show(); 
       $(".message").text("OVER"); 

      }, 
      mouseleave: function(e){ 
       $(".inner").hide(); 
       $(".message").text("OUT"); 
      } 
     }, ".outer"); 
    }); 
    </script> 
    <style> 
    .outer { 
     padding: 20px; 
     background: green; 
     margin: 50px 0 0 0; 
    } 

    .inner { 
     display: none; 
     background: blue; 
     height: 30px; 
     width: 300px; 
     position: absolute; 
     left: 8; 
     top: 25; 
    } 
    </style> 
    </head> 

    <body> 
     <div class="outer"> 
      OUTER 
      <div class="inner">INNER</div>  
     </div> 
     <div class="message"></div> 
    </body> 

</html>

來源

2014-06-07 Emerald214

在研磨鼠標懸停是一個問題有點但這應該工作：

var inner_active = false; 
$(document).on({ 
      mouseover: function(e){ 
       if(!inner_active){      
        $(".inner").show(); 
        $(".message").text("OVER"); 
       } 
      }, 
      mouseleave: function(e){ 
       inner_active = false; 
       $(".inner").hide(); 
       $(".message").text("OUT"); 
      } 
     }, ".outer"); 

$(".inner").on({"mouseover": function(e){ 
      inner_active = true; 

      },"mouseleave": function(e){ 
      $(this).hide(); 
}});

在這裏我們只活躍，只有當我們還沒有從內DIV中進入外層div內股利。 http://jsfiddle.net/Mm3sn/

來源

2014-06-07 09:50:41

您的代碼有一個小問題。當我將鼠標從底部移到頂部時，藍色出現然後消失。想象一下，藍色是一個工具提示，藍色不應該消失，然後鼠標仍然是綠色的。 – Emerald214

這裏是一個較短的解決方案：

 $(".outer").hover(function() { 
    $(".inner").show(); 
}, function() { 
    $(".inner").hide() 
}); 

$(".inner").hover(function() { 
    $(".inner").show(); 
}, function() { 

    $(".inner").hide(); 

});

DEMO

.hover似乎工作魔術在這種情況下。

來源

2014-06-07 09:55:48

此代碼不起作用。嘗試從上到下移動鼠標。當鼠標仍然綠色時，藍色的div會消失。 – Emerald214

我更新了我的代碼和jsfiddle。我靠近了嗎？ –

Nah，因爲這只是一個演示。在我的真實情況下，這些元素一開始就不存在。我的意思是它是動態的，所以你必須使用「on」事件處理程序。 – Emerald214

這個Fiddle可能是一個解決方案。
這樣，當你離開，即使你是在藍格綠格，藍格消失

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(document).on('mousemove',function(event){ 
    if(isOver($('div.outer'), event)){ 
     $('div.inner').css('display','block') 
     }else{ 
      $('div.inner').css('display','none') 
      } 
     }) 
    function isOver(element, e) { 
     var left = element.offset().left, 
      top = element.offset().top, 
      right = left + element.width(), 
      bottom = top + element.height(); 
     return (e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom); 
    }; 
}) 
</script>

來源

2014-06-07 11:56:06 Devima

Mouseout在父級>子級上不起作用

回答

相關問題