jQuery Hover Flickers for Image Caption

Question

Hi. I have some rotating images with hidden captions that I'd like to expose with jQuery when someone hovers. Each image + caption is like this:

<img src="images/picture.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>

The caption is set to display: none; and placed on top of the image with top: -75px. The jQuery for the interaction is so:

$("img[id*=feature-]").hover(function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').addClass("showCaption");
    },
    function(){
    var feature_id = $(this).attr("id").split("-");
    $('p[id=feature-' + feature_id[1] + '-caption]').removeClass("showCaption");
});

It works fine, except, if you mouse over the caption itself, it flickers because the hover effect on the img is coming into play (i.e., the caption is on top of the image, so it fires for both hover and unhover, thus flickering).

I've tried a bunch of things, but not working. Any ideas on stopping the hover off event from firing if I'm on the caption text? Thanks.

Answer 1

Hi

Maybe this solutions can be util:

$(document).ready(function(){
            $(".img-caption").hover(
                function(){
                    $(this).find('p').show();
                },          
                function(){
                    $(this).find('p').hide();
                }
            );

        });

the html looks like:

<div class="img-caption">
<img src="http://www.bertellibici.com/products/112/images/bb_DSC_6763.jpg" id="feature-1-image" />
<p id="feature-1-caption" class="feature_caption">1: Here is the caption</p>
</div>

and the css:

.img-caption{float: left;position:relative}
.feature_caption{display: none;position: absolute;top: 0px;left: 0px}

Answer 2

Thanks, Returnvoid. Your suggestion is more/less what I ended up doing--I needed to work on the div above--doh. Because I was rotating through some images, I needed to attach and detach a class indicating which image was being dealt with. Here's my code, in case this is helpful to anyone else.

// Handle click of featured items in sidebar

$("li[id*=feature-]").click(function(event) {
    // determine the feature_id
    var feature_id = $(this).attr("id").split("-");

    // remove the class indicating what feature is selected
    $("#imagespot").removeClass();
    // add class indicating the current feature
    $("#imagespot").addClass("feature-" + feature_id[1]);
    // hide all feature images
    $("img[id*=feature-]").hide();
    // remove the active class from all list items, and attach to current one
    $("li[id*=feature-]").removeClass("active");
    $(this).addClass("active");
    // show the selected image
    $('img[id=feature-' + feature_id[1] + '-image]').animate({opacity:"show"}, "medium");

});

// Handle display of captions

$("#imagespot").hover(function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption appear on mouseover
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"show"}, "fast");

    },
    function(){
    // determine the feature_id
    var feature_id = $(this).attr("class").split("-");
    // make the appropriate caption disappear on mouseout
    $('p[id=feature-' + feature_id[1] + '-caption]').animate({opacity:"hide"}, "slow");

});