Javascript 包含的div中出现意外的jquery事件行为

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

$（“.outer、.inner、.middle”）
.mouseenter（函数（e）{
$（this.children（“.content:first”）.show（）；
$（this.parents（）.children（“.content:first”）.hide（）；
$（this.children（“.marker:first”）.show（）；
$（this.parents（）.children（“.marker:first”）.hide（）；
})
.mouseleave（功能（e）{
$（this.children（“.content:first”）.hide（）；
$（this.parents（）.children（“.content:first”）.show（）；
$（this.children（“.marker:first”）.hide（）；
$（this.parents（）.children（“.marker:first”）.show（）；
})
.鼠标悬停（功能（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{
字号：0.8em；
位置：绝对位置；
边框：5px纯黑；
背景颜色：浅灰色；
文本对齐：居中；
}
.外部{
排名前10%；
左：10%；
宽度：80%；
身高：500%；
}
.中{
最高：5%；
左：20%；
宽度：60%；
身高：60%；
}
.内部{
最高：5%；
左：30%；
宽度：40%；
身高：60%；
}
.内容{
背景色：aliceblue；
最小高度：2米；
最小宽度：50px；
显示：无；
}
.马克{
高度：50px；
宽度：5em；
背景色：黑色；
位置：绝对位置；
右：0px；
右边距：2px；
显示：无；
颜色：白色；
字体大小：0.8em；
}

外部菜单
小装置
中间菜单
小装置
内部菜单
小装置
仅使用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});
});


如果您只想显示悬停元素的小部件，则必须使用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();
    }
});

仅使用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});
});


如果您只想显示悬停元素的小部件，则必须使用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();
    }
});

我的期望值：一个rhs“浮动”小部件，用于跟踪鼠标的垂直位置，并且仅当光标在标记容器的范围内时才可见。
我的期望值：rhs“浮动”控件跟踪鼠标的垂直位置，并且仅当光标在标记容器的范围内时才可见。
您是否尝试在鼠标移动时更新标记位置？如果是，那么你需要使用mousemovethank。这就解决了问题。尽管它没有解释为什么上面的jquery代码响应$（“.marker”）.mouseover事件。您是否尝试在鼠标移动时更新标记位置？如果是，那么你需要使用mousemovethank。这就解决了问题。虽然它没有解释上面的jquery代码响应$（“.marker”）.mouseover事件的原因。但这并没有解决.mouseover函数的问题，该函数似乎只对.marker事件做出反应，您可以通过包括以下行看到：$（“.content”，$（this））.html（“left=“+e.pageX+”right=“+e.pageY”）；另外，尝试将css选择器应用于标记不会禁用更正父标记。因此，所有3个开关同时打开。我认为js是隐藏父标记所必需的。我提供了一个jQuery解决方案，其中只有所需的小部件是可见的。这并不能解决.mouseover函数的问题，该函数似乎只对.marker事件作出反应，您可以通过包括以下行来看到：$（“.content”，$（this））.html（“left=“+e.pageX+”right=“+e.pageY”）；另外，尝试将css选择器应用于标记不会禁用更正父标记。因此，所有3个开关同时打开。我认为js是隐藏父标记所必需的。我给了您一个jQuery解决方案，其中只有所需的小部件可见