Javascript: Div slide down on another div

In this jsfiddle, I would like the "#video" div to slide down completely and stay until the mouse is over "#wrap". But its going up and down even though the mouse is on #wrap. Any idea?

html:

<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
</div>

css:

#text
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
background: #FAAC58;
margin-left:auto;
margin-right:auto;
}

#video
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
display:none;
background: rgba(0,0,0,0.8);
}

Jscript:

$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});

[To see links please register here]

use mouseenter and mouseleave instead. It will handle the mouseover bubbling (

[To see links please register here]

)

The `mouseover()` and `mouseout()` functions are called continuously when the mouse is moving. Try instead using [`mouseenter()`][1] and [`mouseout()`][2] so that the event is only fired once:

$("#wrap").mouseenter(function() {
$("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
$("#video").slideUp("slow");
});


Here's a link to [an updated JSFiddle][3].


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

when `#video` slides down, it comes on `#wrap` so mouse pointer becomes on `#video` then `$("#wrap").mouseout` is triggered

Try this:

$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").slideDown("slow");
});
$("#video").mouseout(function(){
$("#video").slideUp("slow");
});
});

Use the `hover` event instead of `mouseover` and `mouseout`, your `mouseover` get triggered many times as the mouse moves inside the div `#wrap`

$(document).ready(function () {
$("#wrap").hover(function () {
$("#video").slideDown("slow");
}, function () {
$("#video").slideUp("slow");
});
});

[fiddle][1]


[1]:

[To see links please register here]

When your #video div covers up the #wrap div, it triggers the mouseout event. One option is to use a third see-through div above both #video and #wrap and use that to trigger the events:

<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
<div id="cursor"></div>
</div>

$(document).ready(function(){
$("#cursor").mouseover(function(){
$("#video").slideDown("slow");
});
$("#cursor").mouseout(function(){
$("#video").slideUp("slow");
});
});

Here's the updated working code:

[To see links please register here]