admin管理员组

文章数量:1330917

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 acplish what i am trying to do.

as you can see on here, / (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.

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 acplish what i am trying to do.

as you can see on here, http://jsfiddle/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.

• javascript
• jquery

Share Improve this question Follow asked Dec 20, 2012 at 15:57 johjoh 11155 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link">Hover me</a>
<div id="box">Surprise!</div>

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

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.

本文标签： javascriptjQuery display box on hover and hide on mouseleaveStack Overflow