Mouseout Not Working After InnerHtml Changed

1
votes

Could anybody explain to me why

$(document).ready(function(){   
   $("#fitness").mouseenter(function() {
  $("#fitness .cont").html(jQuery('#fitness_content').html());  
}).mouseleave(function(){
  $("#fitness .cont").html(jQuery('#fitness_img').html());
  }) 
});

is not working. The mouseout or mouseleave event doesn't seem to get caught. Has it got something to do with the size of the DIV? I tried using live and bind and it wasn't working either. The only case it worked was when I update the img src directly using attr method. However I would like to be able to wrap the image in some DIV. Please take a look at http://jsfiddle.net/donysukardi/CnWku/. Any help is greatly appreciated!I

1
javascriptjqueryhtml

1 Answers

0
votes

Because all of the elements that go inside the .cont element, are absolutely positioned. This makes the actual container to be of zero height so there is nothing to catch the event..

if you put a border to the container you will see what i mean..

Remove the absolute positions to all elements except the container seems to do the trick..

demo at http://jsfiddle.net/CnWku/2/