Question

我有一个水平导航菜单，当用户的鼠标停留在按钮上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：

<th title="">   
    <a href="#" class="btn">
        <span class="person">Firstname Lastname</span>
    </a>

    <div class="tip-wrapper">
        <div class="tip-border">
            <div class="tip">
               tool tips go here
            </div>
        </div>
    </div>  
</th>

我看了很多教程，但无法弄清楚为什么我的工作不起作用。

Answer 1

如果鼠标在超时发生之前离开，你会立即hide()，然后在超时运行后show()。

相反，您应该使用hoverIntent plugin，它会为您执行此操作。

Answer 2

您有一些语法错误：function {应为function() {（同样适用于setTimeout(function{ =＆gt; 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.s。：使用.siblings()代替.parent().children()

Answer 3

首先，你的脚本中有一些语法错误（正如gion_13所指出的那样）。

其次，要确保在超时完成之前用户将鼠标移开，工具提示不会显示错误，您需要使用变量来存储超时，以便在{{1 } hover参数。

Working Fiddle

Jquery使用setTimeout悬停

3 个答案: