DIV displays as normal but sometimes reads the links from the div behind it

[wright67uk]

Im finding it difficult to explain my problem however I shall give it my best shot;

 

my page http://www.1pw.co.uk/circlesmin.html

 

As you will see from my link, I have some thumbnails in the small circle which with the help of javascript cause an image to appear in the larger circle.

Ok brilliant!  things seem to work fine!

 

After a few minutes of hovering here and there in each of the three circles, things begin to go a little weird. 

The thumbnails display as normal, however  the links are being read from one of the other small circles.

 

eg.  If im in the contact details small circle, I can move my mouse into the empty area, and it will as if by magic be reading the links from the portfolio  circle.

 

As you will see from the Jquery below, ive played around with z-index, ive tried it with and without mentioning z index in the last chunk of code, but either way not a lot changes.  Ive asked for help in another forum, but ppl said it looked as though my page was fine, so please can i state that this happens after a while of hovering here and there, and not always immediately.

 

 $(function() {
                
                /* when page loads animate the about section by default */
                //move($('#about'),2000,2);
                $('#menu > a').mouseover(
                function(){
                    var $this = $(this);
                    move($this,800,1);
                }
            );
                /*
                function to animate / show one circle.
                speed is the time it takes to show the circle
                turns is the turns the circle gives around the big circle
                 */
                function move($elem,speed,turns){
                    var id = $elem.attr('id');
                    var $circle = $('#circle_'+id);
                    /* if hover the same one nothing happens */
                    if($circle.css('opacity')==1)
                        return;
                    /* change the image */
                    $('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);
                    /*
                    if there's a circle already, then let's remove it:
                    either animate it in a circular movement or just fading out, depending on the current position of it
                     */
      
      /*
      left, top
      */
      
                    $('#content .circle').each(function(i){
                        var $theCircle = $(this);
                        if($theCircle.css('opacity')==1)
                            $theCircle.stop()
                        .animate({
                            path : new $.path.arc({
                                center : [180,189],
                                radius : 257,
                                start : 65,
                                end     : -110,
                                dir : -1
                            }),
                            opacity: '0'
                        },1500);
                        else
                            $theCircle.stop()
                        .animate({opacity: '0'},200);
                    });
                    /* make the circle appear in a circular movement */
                    var end = 65 - 360 * (turns-1);
                    $circle.stop()
                    .animate({
                        path : new $.path.arc({
                            center : [180,189],
                            radius : 257,
                            start : 180,
                            end  : end,
                            dir  : -1
                        }),
                        opacity: '1'
                    },speed);
                }




      $('.thumbs img, .thumbs2 img, .thumbs3 img').hover(function()
	  {
	  $(this).parent().css({'z-index' : '990'});  
	  $(this).css ({'z-index' : '1000'});
	    var imgID = $(this).attr('id');
		var largeImgUrl = $(this).parent().attr('href');
	 $('div.circleBig').append('<img class="imgInCircle" src="'+largeImgUrl+'">');
      }, 
	  function(){		
	    $('div.circleBig img').remove();
		$(this).css ({'z-index' : '001'});
		$(this).parent().css ({'z-index' : '001'}); 
      });
	  });	

 

I am slowly going bald pulling my hair out over this one.  I really dont want to be using flash for this project! so any suggestions would be great!