hovering over child elements firing mouseout

Placebo

[Jquery] anyone know way around this, in actionscript there is a relatedobject function/class

try hover over the boxes, a red box will slideup,
hover over that and it shouldnt flicker.

However it wont work when im using images.

working = http://jsfiddle.net/XCgvd/
not working = http://jsfiddle.net/tXJDQ/2/


technically its not a chid element but a sibling,
i posted it on stackoverflow but no idea what the guy is trying to say
http://stackoverflow.com/questions/8275903/hovering-over-child-element-firing-mouse-out

Giblet

$('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

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

Giblet

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!