hover/mouseover prob with Chrome...

hover/mouseover prob with Chrome...


I'm adding a feature to my photo site, that when you mouse over photo you see an arrow on top of the photo.. left part of the photo goes back, right side goes forward (yes, I'm doing a little bit what FB does...;-)

now when you mouseover the photo and keep clicking the photo, the mouse is on the photo when you land on the page, yes?  so in FF when you land -- if the mouse is on the photo -- you see the arrows onLoad, but not on Chrome, on Chrome you have to move the mouse before you see the arrow (functionality is the arrow shows on mouseover for the link (with yellow borders..) so when you mouse away from photo you don't see it anymore, but if you land on the pg and the mouse is over the photo, it should appear...  in Chrome & Safari it doesn't.. (i.e., webkit issue...)

code:

  1.     $('#photo a.photo_link').mouseenter(function() {
  2.             $('span', this).fadeIn().css('display','block');
  3.      });
  4.        
  5.         $('#photo a.photo_link').mouseleave(function() {
  6.             $('span', this).fadeOut();
  7.         });

I also tried, hover, mouseover...  for example....

  1. $('#photo a.photo_link').hover(function() {
  2.                 $('span', this).fadeIn(); 
  3.             },
  4.             function() {
  5.                 $('span', this).fadeOut();
  6.             }
  7.         );


I searched for hover/mousever prob with Chrome, but didn't get too far...  most solutions just mentioned .hover() fn....

thank you.......