Question

I have a div that expands when you hover and contracts to small size when you mouseout. The only problem is the mouseout is triggered when you hover over an inner element in the div such as an image or < p >.

example fiddle here

this is my jquery code:

$(".riser").mouseover(function(){ 
 $(this).animate({height:400}, 100);
});  

$(".riser").mouseout(function(){ 
 $(this).animate({height:150}, 100);
}); 

I only want to make the div smaller when i mouseout of the div, i dont want it to do anything when i hover over the inner elements.

Answer 1

Change mouseout to mouseleave (and mouseover to mouseenter, although that shouldn’t matter).

http://jsfiddle.net/FCxYW/2/