Open a div via trigger and leave it open as long as mouse in the opened div

A simple jQuery question There is 开发者_如何学Gotrigger, which opens a div, now I want the div to remain open as long as the mouse is in the div.

Eg. (trigger)->open(box)->as long as mouse in the box, leave box open.

How does one do this?

http://jsfiddle.net/Gq2LX/

the problem is the hover you have is working on your trigger div. if you leave the trigger div your mouseOut function is called.

change your DOM a bit, and put the box INSIDE the trigger makes it work.

html:

<div id="trigger">
  <span>This is a trigger</span>
  <div id="box"></div>
</div>

script:

$('#trigger').hover(function() {
    $('#box').show();
}, function() {
    $('#box').hide();
});

css:

#box {width:350px;height:400px;border:1px solid #000;display:none;}
#trigger {width:350px;}

i changed the width of the #trigger element (by default the div element takes 100%) and i changed the markup (adding box inside the trigger.

working example:

http://jsfiddle.net/Gq2LX/2/

or like that:

$('#trigger').mousenter(function() {
    $('#box').show();
});

$('#box').mouseleave(function() {
    $(this).hide();
});

http://jsfiddle.net/Gq2LX/6/