jQuery悬停时显示框，鼠标离开时隐藏

Question

嗯，我正在尝试创建一个在链接悬停时弹出的框。

我已经掌握了基本技能，但由于某种原因，我无法完全实现我想做的事情。

你可以在这里看到：http://jsfiddle.net/EpV87/1/（很抱歉，这是一个问题的简单重现）

我想要做的是，当鼠标悬停在“HOVER HERE”上时，使框（TEST）可见，并且当鼠标悬停在框内部时，框应该可见。

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

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

- joh

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>

- Bruno

---

嗯，这不是打字错误，我需要在悬停内部时让该框可见。 - joh

这个方案可行，除非你希望当鼠标悬停在“TEST”文本上时也能看到“TEST”。 - getit

@joh 我更新了我的解决方案 http://jsfiddle.net/brunoscopelliti/EpV87/8/ 现在，如果鼠标悬停在内部，框将可见。 - Bruno

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

- Robin van Baalen

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

你可以在这里检查它。

- Aioros