带有setTimeout的Jquery悬停

我有一个水平导航菜单，当用户的鼠标停留在按钮上1秒时，我想显示一个工具提示。或者换句话说，我希望在提示出现时有一个延迟。当用户移开鼠标时，工具提示应立即消失。Stumbleupon的工具栏就是我希望它发挥作用的一个例子

javascript:

$("a.btn").hover(
    function() {
        var tip = $(this).parent().children(".tip-wrapper");
        setTimeout(function{
            tip.show();
        }, 1000)
    },
    function {
        var tip = $(this).parent().children(".tip-wrapper");
        tip.hide();
    }
);

html:

这里有工具提示

---

我看过很多教程，不明白为什么我的不起作用。

如果鼠标在超时发生之前移开，你会立即

隐藏（）

它，然后

在超时运行后显示（）

相反，您应该使用，它可以为您执行此操作。
您有一些语法错误：
函数{
应该是
function（）{
（同样适用于
setTimeout（function{
=>
setTimeout（function（）{
）；

我建议使用一个引用超时函数的变量。这样，如果用户未将元素悬停至少一秒钟，则可以停止工具提示的显示：

var timeout;
$("a.btn").hover(
    function() {
        var tip = $(this).siblings(".tip-wrapper");
        timeout = setTimeout(function(){
            tip.show();
        }, 1000);
    },
    function() {
        // prevent the tooltip from appearing
        clearTimeout(timeout);
        var tip = $(this).siblings(".tip-wrapper");
        tip.hide();
    }
);

此外，您应该在开始时隐藏工具提示。是一个实时工作示例

只要您已经在项目中使用jquery，我建议您利用它并使用它的动画功能。这样，您的代码就变成：

$("a.btn").hover(
    function(){
        $(this).siblings('.tip-wrapper').fadeIn(1000);
    },
    function(){
        $(this).siblings('.tip-wrapper').stop().hide();// or fadeOut();
    }
);

p、 美国：使用
.sibbins（）
而不是
.parent（）.children（）
首先，脚本中有一些语法错误（正如gion_13所指出的）

其次，如果用户在超时完成之前将鼠标移开，为了确保工具提示不会错误显示，您需要使用一个变量来存储超时，以便可以在
hover
的
handlerOut
参数中清除它

.
或在使用stop（避免超时变量）时，使用delay（1000）。fadeIn（0）：
$("a.btn").hover(
    function(){
        $(this).siblings('.tip-wrapper').fadeIn(1000);
    },
    function(){
        $(this).siblings('.tip-wrapper').stop().hide();// or fadeOut();
    }
);