Question

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

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

＆＃13;

$( ".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});});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

我的期望：用于跟踪鼠标垂直位置的rhs“浮动”小部件，只有当光标位于标记容器的范围内时才可见。

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

2 个答案: