javascript - 悬停时的jQuery显示框和鼠标离开时隐藏

Question

好吧，我正在尝试创建一个当链接悬停时应该弹出的框，

好吧，我已经掌握了基本知识，但是由于某种原因，我无法完全完成我想做的事情。

正如你在这里看到的那样，http://jsfiddle.net/EpV87/1/（对不起，它对我遇到的问题的再现不佳）

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

当鼠标输入时TEST，它可以正常工作，但是，当它悬停在另一个OTHER空白空间时，它不能正常工作，因为该TEST框仍然可见。

如果鼠标悬停在其他和空白空间上，我如何使TEST框隐藏谢谢，我是 jQuery 的新手。

Answer 1

受这个旧答案的启发：

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

在我检查的版本中，您正在另一个 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>

这样就可以让TEST div在鼠标离开容器div时消失。​</p>

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

你可以在这里查看。