获取fotorama框架的缩略图

Question

我使用 [fotorama][1] 框架来显示我的图像并且效果很好。现在我想在将鼠标悬停在缩略图上时显示标签 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

首先，删除此 attr('src')，因为它会生成控制台日志中显示的错误

原来是：

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

之后，我在您的标记中没有看到 label 标记；添加它。像 :

<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框架的缩略图

Get the thumbnail image of fotorama framework

jquery

css

fotorama