javascript - 来自包含的 div 中的意外 jquery 事件行为

Question

我在最近创建的一个小型 HTML 小部件上看到了意外行为。三个连续嵌入的 div，每个都有一个标记和一个菜单，它们在进入 div 时显示并在退出时隐藏。该标记旨在跟踪鼠标的垂直位置。这里的问题是，仅当鼠标悬停在标记上时才会触发 mouseover 事件，而不会在鼠标悬停在包含的 div 上时触发。

http://jsfiddle.net/laurencefass/f47a7a2r/

$( ".outer, .inner, .middle" )
   .mouseenter(function(e) {
       $(this).children(".content:first").show();
  $(this).parents().children(".content:first").hide();

       $(this).children(".marker:first").show();
       $(this).parents().children(".marker:first").hide();
   })
   .mouseleave(function(e) {
       $(this).children(".content:first").hide();
       $(this).parents().children(".content:first").show();

       $(this).children(".marker:first").hide();
       $(this).parents().children(".marker:first").show();
   })
   .mouseover(function(e) {
    $(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY);
    var marker = $(this).children(".marker");
   marker.offset({top:e.pageY - marker.height()/2, right:0});});

.outer, .middle, .inner {
    font-size:0.8em;
    position:absolute;
    border:5px solid black;
    background-color:lightgray;
    text-align:center;
}

.outer {
    top:10%;
    left:10%;
    width:80%;
    height:500%;
}

.middle {
    top:5%;
    left:20%;
    width:60%;
    height:60%;
}

.inner {
    top:5%;
    left:30%;
    width:40%;
    height:60%;
}

.content {
    background-color:aliceblue;
    min-height:2em;
    min-width:50px;
    display:none;
}

.marker {
    height:50px;
    width:5em;
    background-color:black;
    position:absolute;
    right:0px;
    margin-right:2px;
    display:none;
    color:white;
    fontsize:0.8em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
    <div class="content">outer menu</div>
    <div class="marker">widget</div>
    <div class="middle">
        <div class="content">middle menu</div>
       <div class="marker">widget</div>
        <div class="inner">
            <div class="content">inner menu</div>
            <div class="marker">widget</div>
        </div>
    </div>
</div>

Answer 1

只需使用 CSS 即可轻松完成此操作。您也可以将此功能用于您的小部件。

.outer:hover>.content,
.middle:hover>.content,
.inner:hover>.content{
    display: block;
}

然后你可以删除你的 mouseenter 和 mouseleave

$( ".outer, .inner, .middle" )
   .mouseover(function(e) {
       var marker = $(this).children(".marker");
       marker.offset({top:e.pageY - marker.height()/2, right:0});
});

JSFiddle

如果您只想显示悬停元素的小部件，您必须使用 jQuery，此外，您可能会使用 mosemove() 事件使其始终位于鼠标位置。

$( ".outer, .inner, .middle" ).mousemove(function(e) {
    e.stopPropagation();
    var marker = $(this).children(".marker");
    marker.eq(0).show();
    marker.offset({top:e.pageY - marker.height()/2, right:0});
});

$( ".inner, .middle" ).mouseenter(function(e) {
    if($('.marker', $(this).parent()).eq(0).length){
       $('.marker', $(this).parent()).eq(0).hide();
    }
});

$( ".outer, .inner, .middle" ).mouseleave(function(e) {
    if($('.marker', $(this).eq(0)).length){
       $('.marker', $(this).eq(0)).hide();
    }
});

JSFiddle