获取fotorama框架的缩略图

Question

我使用fotorama框架来显示我的图像，它工作得很好。现在，当我将鼠标悬停在缩略图上时，我想显示一个标签，image.Below是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

我找到了这个问题的解决办法。

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

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


});

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

});

Answer 2

首先，删除此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
}

先把它藏起来。

演示