Question

我使用[fotorama] [1]框架来显示我的图像，它工作正常。现在我想在鼠标悬停在缩略图上时显示标签。下面是html结构

<div class="fotorama fotorama1524085616475" data-navposition="top" id="fotorama-images" data-arrows="always" data-auto="false" data-nav="thumbs" data-transition="crossfade" data-allowfullscreen="native" data-fit="cover" data-keyboard="true" data-swipe="true" data-click="true" data-width="100%" data-ratio="2/3"><div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--fade fotorama__wrap--no-controls" style="width: 100%; min-width: 0px; max-width: 100%;">
    <div class="fotorama__nav-wrap">
        <div class="fotorama__nav fotorama__nav--thumbs fotorama__shadows--right" style="width: 502.109px;">
            <div class="fotorama__nav__shaft fotorama__grab" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                    <div class="fotorama__thumb-border" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); width: 60px;"></div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb fotorama__active" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/0fd47dc8-87e0-45cb-a09d-ea3a2b582451/14-1.png" class="fotorama__img" style="width: 64px; height: 91.3333px; left: 0px; top: -13.6667px;">
                    </div>
                </div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/2375de5b-8103-4eec-9a33-3967e7e136fe/3-1.png" class="fotorama__img" style="width: 64px; height: 91.2941px; left: 0px; top: -13.6471px;">
                    </div>
                </div>
                <div class="fotorama__nav__frame fotorama__nav__frame--thumb" tabindex="0" role="button" style="width: 64px;">
                    <div class="fotorama__thumb fotorama__loaded fotorama__loaded--img">
                        <img src="c8a9bbd396f6249a75ffa8dd527cf067/e85be9def9c9095bc1983e77c5d87ea9/documents/files/3844b2bc-81c2-474b-aa98-2041b18d6fdc/8-1.png" class="fotorama__img" style="width: 64px; height: 90.3666px; left: 0px; top: -13.1833px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我到目前为止所尝试过的。

<script>
$(document).ready(function(){
   $('#fotorama-images div.fotorama__thumb.fotorama__loaded.fotorama__loaded--img').find('img').attr('src').hover(function ()
    {
        $("#mylable").css('visibility','visible');
    },function ()
    {
        $("#mylable").css('visibility','hidden');
    });
});
</script>

它没有显示跨度标签。如何访问图像？

[编辑]添加了div结构

Answer 1

首先，删除此attr('src')，因为它会在控制台日志中看到错误

所以它是：

   $('#fotorama-images div.fotorama__thumb.fotorama__loaded.fotorama__loaded--img').find('img').hover(function ()

之后，我在标记中看不到标签;添加它。类似的东西：

<label id="myLable">Hey!</label>

（我认为myLable有拼写错误，可能是myLabel吗？）

为该标签添加Css：

#myLable{
  visibility:hidden
}

隐藏起初。

DEMO

Answer 2

我找到了这个问题的解决方案。

$(document).on('mouseover', '.fotorama__nav__frame', function () {

$("#mylabel").css('visibility','visible');


});

$(document).on('mouseleave', '.fotorama__nav__frame', function () {
    $("#mylabel").css('visibility','hidden');

});

获取fotorama框架的缩略图

2 个答案: