mouse over children on ajax'd content
Hello,
Im having a bit of a problem using the mouse over call on the .live method when im ajaxing
So all i want to do is when i roll over the div with the class parent, it shows the child div (with the class of .child)
The problem that im encountering is that when i roll from the parent div to the child div, it counts as rolling off the parent div even though the child div is within the parent div.
Here's the jquery:
$(document).ready(function(){
$('.parent').live('mouseover mouseout', null, function(event){
if(event.type == "mouseover"){
this.width = $(this).width();
$(this).children().fadeIn(300);
}else{
$('.child').fadeOut(300);
}
return false;
});
}); //end of document ready function
}); //end of document ready function
and the html:
<body>
<div class="parent">
TEXT HERE
<div class="child" style="display:none">WRAPPER</div>
</div>
</body>
and the css:
.parent {
float: left;
padding: 5px;
background-color: #CCC;
}
.child{
position: absolute;
padding: 5px;
background-color: red;
}
--
Not really sure why its not working.. is there anything special that i have to do to get it to recognise rolling onto the child element as NOT rolling off the parent?
By the way, im using the .live method because this will eventually be loaded onto the page with AJAX.
Cheers,
Craig.