悬停时的jQuery显示框并隐藏在mouseleave上 [英] jQuery display box on hover and hide on mouseleave

问题描述

好吧，我想创建一个盒子，当链接悬停时会突然出现，

Well, i am trying to create a box should pop out when a link is hovered,

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

well i got the basic covered, but for some reason i couldn't fully accomplish what i am trying to do.

如您所见， http：// jsfiddle.net/EpV87/1/ （对不起，我正在解决的问题很糟糕）

as you can see on here, http://jsfiddle.net/EpV87/1/ (sorry its a poor recreation of the problem i am having)

我想做的是做如果 HOVER HERE 悬停，并且如果鼠标悬停在里面，则框应该可见，显示框（ TEST ）。

What i am trying to do is to make the box (TEST) visible if HOVER HERE is hovered and box should visible if mouse is hovered inside.

当鼠标输入 TEST 时，它可以正常工作，但是当它挂到其他 OTHER 和一个空格，它无法正常工作，因为 TEST 框仍然可见。

when the mouse entered TEST, it works correctly, however, when it is hovered to other OTHER and a empty space, it doesn't work correctly as the TEST box is still visible.

如果鼠标悬停在OTHER&上，如何隐藏 TEST 框空格
谢谢，我是jQuery的新手。

How do i make the TEST box hide if mouse hovered on OTHER & empty space Thanks and i am newbie to jQuery.

推荐答案

灵感来自这个旧答案：

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>

这篇关于悬停时的jQuery显示框并隐藏在mouseleave上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！