hover() issue

hover() issue

I want to create a button and whenever a user moves the mouse over it, an image of a hand, previously hidden, will fade in over the button. I mean a custom image made by me, not the hand cursor. Next when the user moves the mouse out, this hand will fade out.

Everything works ok if I move the mouse over an edge of the button. If I however move the mouse over the button and the mouse pointer is matching up with the area where the hand will appear, just when the hand fades in, the mouseout event for the button will be triggered, thus making the hand to fade out. When it fades out, the mouseover event will be triggered, and so on, constantly fading in/out.

What should I do to avoid this?

This is the code I made:

  1. $('#wrapper .form_button').hover(
  2.                     function() {
  3.                         $('#hand').fadeIn('fast');
  4.                     },
  5.                     function() {
  6.                         $('#hand').fadeOut('fast');
  7.                     });