Reputation: 111
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
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
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
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(){...
<a class="abc">ABC</a>
<div id="def">TEST</div>
$('.abc').mouseenter(function(e) {
$('#def').show(200);
}).mouseleave(function(e){
$('#abc').mouseleave(function(){
$('#def').hide(200);
});
});
<a class="abc">ABC</a>
<div id="def" style="display: none;">TEST</div>
$('.abc')
.on("mouseenter", function () {
$("#def").show();
})
.on("mouseleave", function () {
$("#def").hide();
});
Upvotes: 0