Question

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.

I have a jQuery event that when you rollover the image, it displays the caption. Like so:

function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}

And when you roll out:

function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}

However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?

Here’s a link: Example

Thanks, Coulton

Answer 1

I took a look at your JS but I couldn’t find what triggers the display of the caption – you should be binding the event to the parent div of the image, that way it won’t fade out. If it is currently bound to just the image, that’s your problem. P.S – it always helps to include a code example.