I have created some jQuery code that runs when the mouse hovers over spans. These spans are on top of images. In the function I have written it also changes the class of other images. This is all to create a type of show hide effect that can show an image when I am on a particular part of the graphic. It basically works but it is ‘sticky’, meaning that sometimes the images get stuck or don’t roll back. Does anybody know the concepts I am dealing with here. Does this relate to binding? Can anyone direct me to reading, tutorials or guides on how to manage multiple hover/mouseenter jQuery procedures? I know from Actionscript that there is a property called mouse children that is helpful when rolling over objects that have other objects in them, is this similar? Thanks

1. $(document).ready(function(){
       var thumb = $('.video_area');
           setIn(thumb);
           setOut(thumb);       
   });
   
   function setIn(thumb) {
           thumb.mouseenter(function(){
           $(this).find('.thumb1').addClass('hidden');
           $(this).find('.link_thumb img').eq(0).removeClass('hidden');
           $(this).find('span').removeClass('hidden');
           $(this).find('.link_thumb span').mouseenter(function(){
           var pos = $(this).index();
           $(this).parent().find('img').eq(pos-5).removeClass('hidden');
   
           });
      
       });
   
   }
   
   function setOut(thumb) {
           thumb.mouseleave(function(){
           $(this).find('.thumb1').removeClass('hidden');
           $(this).find('.link_thumb img').eq(0).addClass('hidden');
           $(this).find('span').addClass('hidden');
           $(this).find('.link_thumb span').mouseleave(function(){
           var pos = $(this).index();
           $(this).parent().find('img').eq(pos-5).addClass('hidden');
          
           });
          
       });
   }