Question

哟我的朋友在他的网站上遇到编码错误，并向我求助。但是我也被卡住了。你看到当你将鼠标悬停在一个链接上时会弹出一个工具提示，但是他想要它在链接的末尾，而不是在中间。（顺便说一句，他正在使用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

Answer 1

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

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

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

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

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

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

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

1 个答案: