Question

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

enter image description here

这是我写的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时才会消失。我该怎样解决这个问题？

Answer 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);
});

Answer 2

您的代码存在一些小问题。现在正在咬你的那个是当你输入AAA时你没有清除BBB的超时。您可以通过向AAA的clearTimeout处理程序添加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'});
}

Answer 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/

Answer 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>

Answer 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

Answer 6

time是否在所有这些之外宣布了？

它与上面两个函数的范围不同，因此不是同一个变量，因此clearTimeout()调用无效。

使用var time;在两者之外声明它，以便它们引用相同的变量。

如果鼠标超过div，则取消setTimeout

6 个答案: