Question

我有完整的演示代码。当鼠标悬停在绿色div上时，我想显示蓝色div并在鼠标输出绿色div 时隐藏蓝色div。问题是当我将鼠标移到绿色并向上移动时，鼠标实际上是在绿色区域之外，但蓝色不会消失。如何解决问题？

<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>

Answer 1

这是一个较短的解决方案：

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

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

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

});

<强> DEMO

在这种情况下，

.hover似乎有效。

Answer 2

过度研磨鼠标有点问题，但这应该有效：

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时才激活内部div。 http://jsfiddle.net/Mm3sn/

Answer 3

这Fiddle可能是一个解决方案。
这样，当你离开绿色div时，即使你在蓝色div上，蓝色div也会消失

   <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>

Mouseout不适用于父＆gt;儿童

3 个答案: