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上时触发不透明度为零的.tooltip。我该如何做到这一点？

Answer 1

将工具提示标记移出触发器。由于触发器div正在包装工具提示，它实际上是弹出工具提示。如果您打算仅将鼠标悬停在触发器上，那么请将它们分开。

Answer 2

您的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
    });
});

Answer 3

一个选项是将工具提示css显示设置为隐藏时设置为“无”，并在显示时设置为“阻止”。这样可以防止.tooltip html元素在不可见的情况下占用任何空间。

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

3 个答案: