1

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

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>

查询：

$(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透明度为零的情况下触发. 我将如何做到这一点？

4

3 回答 3

0

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

于 2012-07-11T17:14:57.703 回答
0

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

如果您确实为.trigger元素添加了更多空间，那么您可以查看事件的目标，并在执行之前查看它是否具有这样的正确类：

$(".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
    });
});
于 2012-07-11T17:22:06.647 回答
0

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

于 2012-07-11T17:23:55.493 回答