jquery 多个图像标题的鼠标悬停可见性

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 的。

要修复 JSFiddle，HTML 和 CSS id "thumb-roller" 应更改为 class。然后，给每个 div 一个 id，比如 "thumb-roller-1"，等等。然后将 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 多个图像标题的鼠标悬停可见性

jquery mouseover visibility for multiple multiple image captions

jquery

visibility

image

captions