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

使用事件委托(delegate):

$('.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 作为样式属性的内容上。