将鼠标悬停在锚点上以在论坛上显示 JQuery 工具提示答案

【问题标题】：Hover Over Anchor To Display JQuery Tooltip on Forum将鼠标悬停在锚点上以在论坛上显示 JQuery 工具提示
【发布时间】：2011-12-23 22:49:52
【问题描述】：

我的朋友们在他的网站上出现编码错误，请我帮忙。但是我也被困住了。您会看到当您将鼠标悬停在链接上时会弹出一个工具提示，但他希望它在链接的末尾，而不是在中间。（顺便说一句，他正在使用 phpbb 论坛）

$(document).ready(function() {
    $("a.topictitle").hover(function() {
        $(this).next(".topic_desc_pos").stop()
        .animate({left: "100", opacity:1}, "fast")
        .css("display","block")
    }, function() {
        $(this).next(".topic_desc_pos").stop()
        .animate({left: "150", opacity: 0}, "fast", function(){
            $(this).hide();
        })
    });
});

如果有帮助，请访问他的论坛 - http://www.codexvideos.com/viewforum.php?f=47

【问题讨论】：

标签： jquery hyperlink hover tooltip forum

【解决方案1】：

主要问题是您在动画左侧 100 像素，但您从未将动画重置回其原始起点，这意味着我将鼠标悬停在链接上的次数越多，工具提示越向右。实际上，您的代码表明，不是将其向左移动 150 像素，而是在“mouseout”事件上继续向右移动它。您希望将其设置为始终在同一位置启动——在这种情况下，您希望起始点位于该链接的右端。

在悬停的“mouseout”部分（第二个悬停块），将其更改为如下内容：

    $(this).next('.topic_desc_pos')
        .stop()
        .fadeOut('fast')
        .css('left', $(this).width());

这应该实现与上述相同的目标，同时确保“左”值始终位于链接的末尾。如果你注意到我将“left”设置为 $(this).width()。这会在淡出后将其移回链接的末尾。

另外，您可能还应该设置一个时间延迟，以确保用户实际上将鼠标悬停在链接上，而不仅仅是在屏幕上移动鼠标，并确保它在淡出之前保持可见一两秒.

希望对您有所帮助。祝你好运。

【讨论】：