如果鼠标在 div 上，则取消 setTimeout答案

【问题标题】：Cancel setTimeout if mouse is over div如果鼠标在 div 上，则取消 setTimeout
【发布时间】：2018-05-14 20:27:27
【问题描述】：

我有两个 div 类，比如 A 和 B。当鼠标在 div A 上时，div B 应该出现，然后如果鼠标在 A 或 B 上，div B 应该保持打开状态。如果鼠标不在 A 和 B div 中，则 B 应该消失。（你可能猜到这是一个简单的工具提示脚本）

这是我写的jquery代码：

$(document).ready(function() {
    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            show();
        });

        $(this).mouseleave(function() {
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

问题是当我从 B 移动到 A 时，B 消失了！我希望它只有在鼠标既不在 A 也不在 B 上时才消失。我该如何解决这个问题？

【问题讨论】：

这应该对你有帮助.. link
你知道 jQuery 有 .show() 和 .hide() 函数可以做你的函数正在做的事情，只要说$("BBB").show(); $("BBB").hide();。
这与此处提出的问题类似：stackoverflow.com/questions/4915977/… 请参阅我发布的 3 个答案和 JSFIDDLE 代码。
如果您将工具提示放在触发它的 div 中，则简单的鼠标悬停/移出即可正常工作。见：jsfiddle.net/vfrQX

标签： javascript jquery

【解决方案1】：

首先，将B 放入A：

<div class="a">
    AAA
    <div class="b">
        BBB
    </div>
</div>

然后，放弃你的 javascript 并使用简单的旧 css 让生活更轻松：

.b
{
    display: none;
}
.a:hover .b
{
    display: block;
}

编辑 - 这是一个使用 CSS 技术的实时示例：http://jsfiddle.net/gilly3/sBwTa/1/

编辑 - 如果您必须使用 JavaScript，只需将 clearTimeout(time) 添加到 show()。但是，让我们也简化您的代码：

$(function()
{
    var time = 0;
    function show()
    {
        clearTimeout(time);
        $("BBB").show(); // Existing jQuery that does $().css("display","block")
    }
    function hide()
    {
        time = setTimeout(function()
        {
            $("BBB").hide();
        }, 200);
    }
    $("AAA,BBB").mouseenter(show).mouseleave(hide);
});

【讨论】：

那些讨厌的 IE6 用户呢？当鼠标在 b 上时，这也不起作用。如果您添加.b:hover {display: block}，它会。然而，大多数现实生活中的实现最终都使用脚本，因此您可以在隐藏显示元素之前留出一点时间，以便提示可以跟随鼠标（如果它愿意）
把它全部放在<a> 中。或者不要打扰... IE6 用户真的那么重要吗？严重地。也许如果您正在编写网上银行软件。否则，请权衡留住这些用户的经济激励与支持他们的时间成本。

【解决方案2】：

您的代码存在一些小问题。现在困扰您的是，当您进入 AAA 时，您没有清除 BBB 的超时。您可以通过将 clearTimeout 添加到 AAA 的 mouseover 处理程序来解决此问题。

其次，在每次设置之前清除这种超时是最安全的，这样如果发生意外情况，您的超时跟踪就不会被覆盖。（清除超时总是安全的，即使它无效或已经发生。）

最后，虽然这很可能只是您的示例代码中的一个问题，但您将time 泄漏到全局对象中。 ;-)

试试这个：

$(document).ready(function() {
    var time;

    function show() {
        $("BBB").css({'display':'block'});
    }

    $("AAA").each(function() {
        $(this).mouseover(function() {
            clearTimeout(time);
            show();
        });

        $(this).mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseleave(function() {
            clearTimeout(time);
            time = setTimeout("hide()", 200);
        });

        $("BBB").mouseenter(function() {
            clearTimeout(time);
        });
    });
});

function hide() {
    $("BBB").css({'display':'none'});
}

【讨论】：

【解决方案3】：

这是一个使用有意义的函数名称的脚本，应该可以很容易地看到正在发生的事情。您必须在两个 div 上取消对 mouseenter 的隐藏。

$(document).ready(function() {
  var timerId, delay = 300;
  var a = $("#A"),
    b = $("#B");

  function stopHide() {
    clearTimeout(timerId);
  }

  function showTip() {
    b.show();
  }

  function startHide() {
    timerId = setTimeout(function() {
      b.hide();
    }, delay);
  }
  a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
  b.mouseenter(stopHide).mouseleave(startHide);
});

div {
  border: 2px dashed firebrick;
  float: left;
  font-size: 50pt;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
}

#B {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>

以前在http://jsfiddle.net/92jbK/1/

【讨论】：

【解决方案4】：

你的代码是错误的:) 试试这个：

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #AAA, #BBB {
            width:100px;
            height:100px;
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <div id="BBB">
        BBB
    </div>
    <div id="AAA">
        AAA
    </div>
    <script src="http://www.google.com/jsapi"></script>
    <script>
        //VISIBLE 
        function hide() {
            $("#BBB").css({'display':'none'});
        }
        function show() {
            $("#BBB").css({'display':'block'});
        }

        // Load jQuery
        google.load("jquery", "1");
        google.setOnLoadCallback(function() {
            // NOT VISIBLE
            // function hide() {
            //     $("#BBB").css({'display':'none'});
            // }
            // function show() {
            //     $("#BBB").css({'display':'block'});
            // }

            $(document).ready(function() {
                var time;

                $("#AAA").each(function() {
                    $(this).mouseover(function() {
                        show();
                    });

                    $(this).mouseleave(function() {
                        time = setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseleave(function() {
                        setTimeout("hide()", 200);
                    });

                    $("#BBB").mouseenter(function() {
                        clearTimeout(time);
                    });
                });
            });


        });
    </script>
</body>
</html>

【讨论】：

和访问
使用 $('#ID_NAME') 而不是 $('ID_NAME')

【解决方案5】：

另一种方法是使用 jquery 的工具提示 http://flowplayer.org/tools/tooltip/index.html

那么你可以这样做：

$('#A').live(function() {
      $(this).tooltip({
      relative: true,
      position: 'top center',
      delay: 200,
      effect: !$.browser.msie ? 'fade' : 'toggle',
      fadeInSpeed: 100,
      fadeOutSpeed: 50,
      predelay: 500
    });
  });

你只需要制作类工具提示的 div b

【讨论】：

【解决方案6】：

time 是否声明在所有这些之外？

在上面的两个函数中它不在同一个范围内，所以不是同一个变量，所以clearTimeout() 调用无效。

用var time;在外面声明它，这样它们就引用同一个变量。

【讨论】：