0

我正在尝试在 上的图库上显示照片标题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>

idthumbnail-roller默认隐藏

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

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

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

4

1 回答 1

0

hover() 适用于这种情况。它有两个参数，一个用于mouseenter，一个用于mouseleave。这是一个解释：悬停和鼠标悬停。第一个总是显示的原因是因为 id 需要是唯一的（你的不是）并且它是第一个具有该 id 的。

要修复 JSFiddle，应将 HTML 和 CSS id“thumb-roller”更改为一个类。然后，给每个 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/

于 2015-07-29T22:03:45.800 回答