<div id='container'>
    <div id="animate"></div>
</div>

I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .

<div id='container'>
    <div id="animate"></div>
</div>

I have a small div inside a big div with id container . i want to hide div with id animate if someone hovers the out side of small div . it should remain open when mouse is over the small div .

• javascript
• jquery

• 1 Is animate hidden by default? – dfsq Commented Mar 13, 2013 at 12:20
• 1 I assume that the 'small div' is the #animate div? – Robin van Baalen Commented Mar 13, 2013 at 12:25
• StackOverflow is not the proper place for this question. We do not write your code for you. You need to do your own coding and if you aren't sure why something is not working as expected, post the code with an explanation of what you were expecting it to do, and what it is actually doing including all error messages. See about StackOverflow. – Lightness Races in Orbit Commented Mar 13, 2013 at 12:45

4 Answers 4

This should do it

$('#small').hover(function () {
    $('#animate').show();
}, function () {
    $('#animate').hide();
});

Try:

CSS:

#container{width:100px;height:100px;background:#F00;}
#animate{width:50px;height:50px;background:#0F0;}

Script:

$(function(){
    $('#container').mouseenter(function(){
        $('#animate').fadeTo(1000,0)
                     .mouseenter(function(){$(this).fadeTo(1000,1)});
    }); // use 750 in place of 1000 to animate it fast
});

Docs http://api.jquery./mouseenter/

HTML:

<div id='container'>
    <div id="animate">&nbsp;</div>
</div>

Fiddle: http://jsfiddle/aZmfz/4/

HTML:

<div id='container'>
    <div id="animate">HI!</div>
</div>

CSS:

#container{
    width: 100px;
    height: 200px;
    background-color: black; 
}
#animate{
    height: 50px;
    width: 100px;
    background-color: white;
    opacity: 0;
}

jQuery:

$("#animate").hover(
    function(){
        $(this).stop().animate({
            opacity: 1
        }, 1000);
    },
    function(){
        $(this).stop().animate({
            opacity: 0
        }, 1000);
    }
);

EXAMPLE

You may not want to do a strict show/hide, because the element will have no height/width to hover over when it's hidden. Instead, you may prefer to set the opacity to 0 (to hide) or 1 (to show) and let the animate function transition between the two. You'll also notice that I used the .stop() function. This is because if you hover back and forth over the element it will continue to call the queued up animations. Calling stop first will prevent this.

You can achieve the same effect with pure CSS:

#animate {
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

#container:hover #animate {
    opacity: 0;
}

#container #animate:hover {
    opacity: 1;
}

Demo: http://jsfiddle/gXz2A/