Question

我正在尝试在mouseover上的图库上显示照片标题，然后在mouseout上隐藏字幕。

这是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默认隐藏

我从以下jquery开始，但不确定这是否是正确的方法..我应该使用hover ??现在它只显示第一个项目的标题而不是我mouseover的标题。任何帮助表示赞赏。

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

这是jsfiddle示例： http://jsfiddle.net/gjxubcru/

Answer 1

hover（）就是针对这种情况。它需要两个参数，一个用于mouseenter，一个用于mouseleave。以下是一个解释：hover and mouseover.第一个总是显示的原因是因为ID需要是唯一的（您的“不是”）并且它是第一个具有该ID的内容。<\ n / p>

要修复JSFiddle，HTML和CSS id＆＃34; thumb-roller＆＃34;应该改成一个班级。然后，给每个div分配一个像＆＃34; thumb-roller-1＆＃34;等等。然后将JS更改为

$("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');
});

这是一个有效的JSFiddle https://jsfiddle.net/1ww0qafw/

多个图像标题的jquery mouseover可见性

1 个答案: