如何仅在图像悬停时显示 fancybox 标题

我正在使用Fancybox插件对于图像库，我想仅当用户将鼠标悬停在图像上时显示图像标题。我不知道要修改代码的哪一部分才能完成此任务。

我尝试通过添加来编辑 CSSa :hover声明如下：

.fancybox-title-over-wrap {
}

我什至尝试过在这里使用 CSS 可见性设置：

.fancybox-opened .fancybox-title {
}

然而，我没有运气。

我必须更改实际 JS 文件中的某些内容吗？任何帮助将不胜感激！

您不需要弄乱原始的 js 或 css 文件。您只需要创建自己的自定义脚本并应用一些 fancybox API 选项和方法即可实现此目的。

例如，有这个 html

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>

你需要一个自定义脚本来触发 fancybox，例如：

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox();
}); // ready
</script>

现在，在上面的脚本中，尝试以下选项title你想要的效果：

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").show();
    }, function() {
     $(".fancybox-title").hide();
   });
  }
 });
}); // ready
</script>

您甚至可以添加一些漂亮的动画来显示title like

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); // ready
</script>

NOTE：这是 fancybox v2.x