Question

[编辑] 所以我使用了下面建议的一个javascript工具提示。如果你搬家的话，我得到了你停下来隐藏的提示。唯一的问题是它在我这样做时有效：

document.onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
        document.getElementById('MyDiv').onmousemove = function() {
        UnTip();
    };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

但我希望该函数仅适用于特定div，如果我将第一行更改为“document.getElementById（'MyDiv'）。onmousemove =（function（）{”我得到一个javascript错误document.getElementById（ 'MyDiv'）是null我想念的是什么.... ??

[/编辑]

当用户鼠标停留在元素上超过1.5秒时，我想显示气球样式消息。然后如果他们移动鼠标我想隐藏气球。我正在尝试使用我发现的一些JavaScript代码。这是我用来检测鼠标何时停止的代码：

document.onmousemove = (function() {
    var onmousestop = function() {
        //code to show the ballon
        };
    }, thread;

    return function() {
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

所以我有两个问题。一，有没有人有一个推荐的轻量级javascript气球，将显示在光标位置。二，检测鼠标停止代码工作正常，但我很难知道如何检测鼠标已经开始再次移动并隐藏气球。感谢...

Answer 1

要回答这个问题有点晚了，但这对有需要的人有用。

我需要此功能才能检测鼠标何时停止移动一段时间，以便在将鼠标悬停在视频上时隐藏HTML / JS播放器控制器。这是工具提示的修订代码：

document.getElementById('MyDiv').onmousemove = (function() {
    var onmousestop = function() {
        Tip('Click to search here');
    }, thread;

    return function() {
        UnTip();
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

就我而言，我使用了一些jQuery来为我的播放器控制器选择元素：

$('div.video')[0].onmousemove = (function() {
    var onmousestop = function() {
        $('div.controls').fadeOut('fast');
    }, thread;

    return function() {
        $('div.controls').fadeIn('fast');
        clearTimeout(thread);
        thread = setTimeout(onmousestop, 1500);
    };
})();

Answer 2

jQuery插件hoverIntent提供了类似的行为。它确定用户是否“意味着”将鼠标悬停在特定元素上，检查它们是否会减慢鼠标向下移动到元素中并花费一定的时间将鼠标悬停在元素上。

当用户离开元素时，它只触发“out”事件，这听起来不像你正在寻找的那样，但代码非常简单。

当您不需要收集事件时，请注意将鼠标绑定到mousemove上，mousemove会快速触发大量事件并对您的站点性能产生严重影响。当光标进入活动元素时，hoverIntent仅绑定mousemove，然后将其解除绑定。

如果您尝试使用hoverIntent，我在缩小版本时没有触发“out”事件时遇到了一些问题，所以我建议使用完整的，未经说明的源。

Answer 3

这是一个漂亮的jQuery插件，可以很好地浮动工具提示。

http://jqueryfordesigners.com/demo/coda-bubble.html

[编辑] 我想如果没有看到伴侣HTML，很难说出错了什么。我会仔细检查元素是否在标记中指定了适当的ID。除此之外，除非这是一个学术练习，否则我建议使用上面引用的jQuery插件。当然还有许多其他预先构建的工具，它们已经处理了你目前所处理的所有细节。

Answer 4

document.onmousemove = (function() {
  if($('balloon').visible) {
  //mouse is moving again
}....//your code follows

使用Prototype.js语法，您可以确定在气球可见后鼠标已移动。

如何在鼠标停止时显示气球工具提示

4 个答案: