Question

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.

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

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.

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.

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

Answer 1

Inspired by 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>