Simple Fade and Hide Problem

Simple Fade and Hide Problem

Basically I am displaying a images in a row.

Each image will have a mouseover and out event, like so
  1. function fadeIn(a) { jQuery(a).find(".thumbnail").fadeTo("slow", 0.7); 
  2. jQuery(a).find(".thumbnailText").show('fast'); }
The mouse over will show a div container which lies on top of the image.

When I mouse of the image away from the area where the new div appears its fine.

However when I move over the new div it repeatable appears and disappears.

The reason for this I reckon is because its being read as the mouse is moving out of the div with the event if this makes sense.

Any input would be great thanks.

  1. echo '<div style="height:200px ;float:left;" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">';
  2. echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '" >';
  3. echo get_the_post_thumbnail($thumbnail->ID, array(230,230), array('class' => 'thumbnail'));
  4.   echo '</a>';
  5.   
  6. echo '<div class="thumbnailText">'.$thumbnail->post_title.'</div>';
  7. echo '</div>';
This is the part where the event is if this helps