hovering over child elements firing mouseout

$('ul').on('mouseover','li',function(){
var $li = $(this);
    if($li.find('div').size() == 0){
       
        $li.append('<div id="box"></div>');        
    }        $li.find('div').stop().animate({bottom:'0px'},{queue:false,duration:350});

    
});
$('ul').on('mouseout','li',function(){
 
    $(this).find('div').stop().animate({bottom:'-53px'},{queue:false,duration:300, 

      complete:function() {

      $(this).remove(); 


}});}
);
    
  

Placebo wrote: »

Thanks Giblet, i got it functioning by using the evenlistener on the li instead, however i was just wondering why the img was firing the mouseout !

Is there any speed issues with using find ?

cheers

More speed issues using jQuery in general. I've taken the li "off dom" to do the find operation, so it's quite fast.

Image was firing mouseout as you were mousing in a sibling element, so the image moused out.

#box{
width:100px;
height:50px;
background:red; 
position:absolute;
bottom:-53px;
z-index:9;
    -webkit-transition: bottom .4s ease-in-out;
    -moz-transition: bottom .4s ease-in-out;
    -o-transition: bottom .4s ease-in-out;
    -ms-transition: bottom .4s ease-in-out;
    transition: bottom .4s ease-in-out;
    
    
}
li:hover #box {
    bottom:0px;
    
}

Works too (#box would need to be on the dom, but could create a document fragment and append to the li without jQuery, or just have it there in your html) If you needed to support in older browsers, remove the animation and just have it display. I wouldn't do animations in older browsers anyway!