joh
joh

Reputation: 111

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.

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.

Upvotes: 3

Views: 8362

Answers (3)

Bruno
Bruno

Reputation: 6000

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>

Upvotes: 5

Aioros
Aioros

Reputation: 4383

You need another div to contain the two elements:

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

This way you can make the TEST div disappear when the mouse leaves the container div.​

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

You can check it here.

Upvotes: 0

Robin van Baalen
Robin van Baalen

Reputation: 3651

You were handling an mouseleave inside another mouseleave handler in the version I checked and had a typo in your selector $('#abc').mouseleave(function(){... should be $('.abc').mouseleave(function(){...

Version you posted originally

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

Solution

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

Upvotes: 0

Related Questions