将鼠标悬停在子项上时删除 JQuery 悬停事件

Question

我正在构建一个工具提示，如果您将鼠标悬停在标记上，则会出现工具提示。

HTML：

<div class="trigger" data-loc="locationE" id="locationE">
    <div class="tooltip">
        <h2>Here is a title</h2>
        <p>Here is some Compy About this location</p>
        <h3>215.237.9932</h3>
    </div>
</div>

JQuery:

$(document).ready(function() {
    $(".tooltip").each(function() {
        toolHeight = $(this).outerHeight();
        toolHeightPlus = $(this).outerHeight() + 20;
        $(this).css({
            "top": -+toolHeight
        });
    });
    $(".trigger").hover(function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "1",
            "top": -+toolHeightPlus
        });
    }, function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "0",
            "top": -+toolHeight
        });
    });
});

我使用 data 属性的原因在这里不需要提及，因为它是用于应用程序的另一部分。我遇到的问题是，当用户将鼠标悬停在工具提示所在的位置时会触发工具提示动画，即使不透明度为 0。我希望工具提示仅在用户悬停在 .trigger 而不是 @ 时触发987654324@ 具有零不透明度。我将如何做到这一点？

Answer 1

一种选择是在隐藏时将工具提示 css 显示设置为“无”，并在显示时设置为“阻止”。这将防止 .tooltip html 元素在不应该可见时占用任何空间。

Answer 2

将工具提示标记移出触发器。由于触发器 div 包装了工具提示，它实际上是弹出工具提示。如果您打算仅将鼠标悬停在触发器上，然后将它们设为单独的元素。

Answer 3

您的请求看起来与您的 HTML 有问题，因为您的 HTML 中没有空间，只有 .trigger，所以在我看来，您的请求永远无法工作，除非您向不是的 .trigger 元素添加更多内容.tooltip 元素。

如果您确实为 .trigger 元素添加了更多空间，那么您可以在操作之前查看 target of the event 并查看它是否具有这样的正确类：

$(".trigger").hover(function(e) {
    if (!$(e.target).hasClass(".trigger")) return;
    $("#" + $(this).data("loc") + " .tooltip").stop().animate({
        "opacity": "1",
        "top": -+toolHeightPlus
    });
}, function(e) {
    $("#" + $(this).data("loc") + " .tooltip").stop().animate({
        "opacity": "0",
        "top": -+toolHeight
    });
});