jQuery：如何在将鼠标悬停在子元素上时禁用悬停在父元素上？

Question

所以我有这样的HTML：

<a class="tooltip" title="my tool tip">
    Hover over me for a tool tip!
</a>

javascript将html更改为以下内容：

<a class="tooltip">
    Hover over me for a tool tip!
    <span style="position:absolute; display:none;">my tool tip</span>
</a>

当鼠标悬停在父元素上时，javascript会触发要显示的子元素。定位子元素使其看起来不在父元素内，因此将鼠标元素悬停在子元素上仍会导致显示子元素。我只想在你没有悬停在它上面时显示子元素。

我该怎么做？

Answer 1

使用事件委托：

$('.tooltip').hover(function(e){
    if($(e.target).is('span')){
        // your child span is being hovered over
        e.stopPropagation();
    }else if($(e.target).is('.tooltip')){
        // your parent element is being hovered over
    }
});

尽管如您对帖子的评论中所述，但您不能将display: none作为样式属性悬停在某些内容上。

Answer 2

查看您的问题，您要将范围附加到a。我想你想要像this这样的东西？我不太确定，因为你的问题不是很明确。