如果将鼠标悬停在某个元素上一段时间，则显示弹出窗口 [英] Show popup if the mouse is hovered over an element for a period of time

问题描述

我想知道当鼠标悬停在某个元素上一段时间后，如何显示弹出窗口/提示框.伪代码:

I'm wondering how to show a popup/tipbox when a mouse has been hovered over an element for a period of time, e.g. pseudo code:

if mouseover
    if hovered for more than 2 seconds
       --> show popup/tipbox
    else
       ---> cancel mouseover
else if mouseout
    --> reset timer/cancel mouseover

到目前为止，我已经完成了此操作，但是它不能有效工作，如果我将鼠标悬停并快速移动，它仍会显示弹出窗口/提示框.

I've done this so far, but it doesn't work effectively, if I hover and move the mouse quickly, it will still show the popup/tipbox.

$('a[rel=tip]').live('mouseover mouseout', function(e)
{
    if(e.type == 'mouseover')
    {
        var mouseTime = setTimeout(function()
        {
            $('.tipbox').slideDown('fast');
        }, 1000);
    }
    else if(e.type == 'mouseout')
    {
        if(mouseTime)
        {
            cancelTimeout(mouseTime);
            mouseTime = null;
            $('.tipbox').slideUp('fast');   
        }
    }
});

编辑:已添加赏金.

推荐答案

这似乎对我有用:

http://jsfiddle.net/eydMC/3/

HTML

<span id="someelem">Hover me for 2 seconds!</span>

JS

var tooltipTimeout;

$("#someelem").hover(function()
                    {tooltipTimeout = setTimeout(showTooltip, 2000);}, 
                    hideTooltip);

function showTooltip()
    {
    var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
    tooltip.appendTo($("#someelem"));
    }

function hideTooltip()
    {
    clearTimeout(tooltipTimeout);
    $("#tooltip").fadeOut().remove();
    }

CSS

#someelem
    {
    cursor: pointer;
    }

.tooltip
    {
    display: block;
    position: absolute;
    background-color: rgb(130, 150, 200);
    padding: 5px;
    }

这篇关于如果将鼠标悬停在某个元素上一段时间，则显示弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！