jquery mouseover visibility for multiple multiple image captions

Question

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/

`id`'s must be unique. u can use `class` instead. try this http://jsfiddle.net/gjxubcru/1/ — Sushil, Jul 29 '15 at 22:08
@Sushil it looks great on fiddle but when I tried to implement this morning, it is a bit jumpy so with my galleryitems (due to using the block attribute). I tried the next solution and this seems to work. Thanks for your help though. — Industry213, Jul 30 '15 at 16:19

Sam H. · Accepted Answer · 2015-07-29T22:17:25.380

0

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/

edited Jul 29 '15 at 22:17

answered Jul 29 '15 at 22:03

Sam H.

4,091
3
26
34

This worked Sam. I had to make each id unique.. it is a bit more overhead in css because then I have to create #thumb-roller-1, #thumb-roller-2 etc.. but this is a fairly simple page and won't be updated often. Thanks for your help! – Industry213 Jul 30 '15 at 16:20
Glad it worked. To make the CSS shorter, each caption div can be given a class, such as `thumb-roller`, and then that can be styled `.thumb-roller{...}` in the same way you were styling the thumb roller id. – Sam H. Jul 30 '15 at 19:45

jquery mouseover visibility for multiple multiple image captions

1 Answers1