3

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.

joh
  • 111
  • 5
  • 12

3 Answers3

5

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>
Bruno
  • 5,961
  • 6
  • 33
  • 52
  • erm, its not a typo, i need the box to visible if hovered inside. – joh Dec 20 '12 at 16:01
  • This works unless you also want the TEST to be visible if the mouse is also over the TEST text... – getit Dec 20 '12 at 16:04
  • @joh i updated my solution http://jsfiddle.net/brunoscopelliti/EpV87/8/ now the box is visible if hovered inside – Bruno Dec 20 '12 at 16:15
0

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();
    });
Robin van Baalen
  • 3,632
  • 2
  • 21
  • 35
0

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.

Aioros
  • 4,373
  • 1
  • 18
  • 21