Question

I have this function for every image in the gallery, it works perfectly until I hover the .work-type class which is a absolute div hovering over the images ( caption ). It restarts the thumbnail function. How can I fix this?

<div class="thumb" id="lifelovelies-thumb" ><a class="ajax" href="gallery/lifelovelies.html">
<div class="work-type"><p class="work-type">PHOTOMANIPULATION</p></div>
<img src="images/thumbs/lifelovelies-bwthumb.jpg" alt=""/>
<img src="images/thumbs/lifelovelies-thumb.jpg" alt="" class="color"/>
 </a></div>

function thumbnail(param1){
        $('#'+param1+'-thumb a').mouseover(function(){
            $('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');})  
        $('#'+param1+'-thumb a').mouseout(function(){
            $('#'+param1+'-thumb .color').stop().fadeTo(500,'0');})                 
    };

Answer 1

I’ve used hoverintent to solve these kind of issues in the past:

http://cherne.net/brian/resources/jquery.hoverIntent.html

If you are trying to show a tooltip over an image you might also want to look at this selection:

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

I’ve used the Dynamic Tooltip.