悬停时的jQuery显示框并隐藏在mouseleave上

Question

好吧，我想在链接悬停时弹出一个框，

好吧，我得到了基本的覆盖，但由于某种原因，我无法完全完成我想要做的事情。

正如你在这里看到的那样，http://jsfiddle.net/EpV87/1/（对不起，我很难重新解决我遇到的问题）

我想要做的是在TEST悬停时让框（HOVER HERE）可见，如果鼠标悬停在里面，则框应该可见。

当鼠标输入TEST时，它可以正常工作，但是，当它鼠标悬停在其他OTHER和空白空间时，它无法正常工作，因为TEST框是仍然可见。

如果鼠标悬停在OTHER＆amp;上，我如何隐藏TEST框？空的空间 谢谢，我是jQuery的新手。

Answer 1

灵感来自this old answer：

var $link = $(".link");
var $box = $("#box");

$link.mouseenter(function() {
  clearTimeout($box.data('timeoutId'));
  $box.show(200);
}).mouseleave(function() {
  var timeoutId = setTimeout(function() {
    $box.hide(200);
  }, 650);
  $box.data('timeoutId', timeoutId);
});

$box.mouseenter(function() {
  clearTimeout($box.data('timeoutId'));
}).mouseleave(function() {
  var timeoutId = setTimeout(function() {
    $box.hide(200);
  }, 650);
  $box.data('timeoutId', timeoutId);
});

.link {
  border: 1px solid red;
  padding: 10px;
}

#box {
  display: none;
  border: 1px solid red;
  margin-top: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link">Hover me</a>
<div id="box">Surprise!</div>

Answer 2

你在version I checked的另一个mouseleave处理程序中处理了一个mouseleave，并且你的选择器中有一个拼写错误 $('#abc').mouseleave(function(){... 应该 $('.abc').mouseleave(function(){...

您最初发布的版本

http://jsfiddle.net/EpV87/1/

HTML

<a class="abc">ABC</a>
<div id="def">TEST</div>

的Javascript

$('.abc').mouseenter(function(e) {
    $('#def').show(200);
}).mouseleave(function(e){
    $('#abc').mouseleave(function(){
        $('#def').hide(200);
    });
});

解决方案

http://jsfiddle.net/EpV87/6/

HTML

<a class="abc">ABC</a>
<div id="def" style="display: none;">TEST</div>

的Javascript

$('.abc')
    .on("mouseenter", function () {
        $("#def").show();            
    })
    .on("mouseleave", function () {
        $("#def").hide();
    });

Answer 3

您需要另一个div来包含这两个元素：

<div id="container">
    <a class="abc">ABC</a>
    <div id="def">TEST</div>
</div>

这样，当鼠标离开容器div时，可以使TEST div消失。

$('.abc').mouseenter(function(e) {
    $('#def').show(200);
});
$('#container').mouseleave(function(e){
    $('#def').hide(200);
});

您可以查看here。