jqueryimagevisibilitycaptions

jquery mouseover visibility for multiple multiple image captions

I'm trying to display photo captions on a gallery on mouseover, then on mouseout it hides the caption.

Here's the html:

<ul class="gallerylist">
    <li class="galleryitem">
        <a href="https://www.google.com"><img class="videothumb" src="https://www.google.com/images/srpr/logo11w.png"></a>
        <br />
        <div id="thumb-rollover">Rollover caption 1
        </div>
    </li>
    <li class="galleryitem">
        <a href="https://www.google.com"><img class="videothumb" src="https://www.google.com/images/srpr/logo11w.png"></a>
        <br />
        <div id="thumb-rollover">Rollover caption 2
        </div>
    </li>
    <li class="galleryitem">
        <a href="https://www.google.com"><img class="videothumb" src="https://www.google.com/images/srpr/logo11w.png"></a>
        <br />
        <div id="thumb-rollover">Rollover caption 3
        </div>
    </li>
</ul>

id thumbnail-roller is hidden by default

I started with the following jquery but not sure if this is the right approach.. should I use hover?? Right now it only displays the caption for the first item instead of the one that I mouseover. Any help is appreciated.

$("li.galleryitem").mouseover(function() {
    $("#thumb-rollover").css('visibility', 'visible');
});

Here's the jsfiddle sample: http://jsfiddle.net/gjxubcru/

Solution

  • hover() is for this situation. It takes two parameters, one for mouseenter and one for mouseleave. Here is an explanation : hover and mouseover. The reason the first one always shows is because ids need to be unique (your's aren't) and it's the first one with that id.

    To fix the JSFiddle, the HTML and CSS id "thumb-roller" should be changed to a class. Then, give each of those divs an id like "thumb-roller-1", etc. Then change the JS to

    $("li.galleryitem").hover(function() {
  //this is for mouseenter
  $("#thumb-rollover-" + this.id).css('visibility','visible');
}, function() {
  //this is for mouseleave
  $("#thumb-rollover-" + this.id).css('visibility','hidden');
});

    here is a working JSFiddle https://jsfiddle.net/1ww0qafw/