jquery - Fancybox 2 标题悬停在画廊更改上

Question

第一次发帖，提前致歉。

我正在使用这个 How to display fancybox title only on image hover and it works,除了当你点击上一个/下一个并且光标已经悬停时，标题不会出现 - 你必须将鼠标悬停并再次返回.

如果您在图像加载时已经悬停，知道如何使标题出现吗？

这里的例子 http://www.richardbarry.co.uk/fancyhover.php

它在fancybox 1中工作，就像这样-http : //www.richardbarry.co.uk/gallery.php

非常感谢任何帮助

Answer 1

作为一种解决方法，您可以尝试添加一个函数来检测鼠标是否已经悬停在这个帖子中的 fancybox 内容...。如果是，则显示 fancybox 标题。

$(".fancybox").fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  },
  afterShow: function () {
    $(".fancybox-title").hide();
    // shows/hides title on hover
    $(".fancybox-wrap").hover(function () {
      $(".fancybox-title").stop(true, true).slideDown(200);
    }, function () {
      $(".fancybox-title").stop(true, true).slideUp(200);
    });
    // detects if mouse is already hovering
    $(".fancybox-outer a, .fancybox-outer img").hover(function () {
      $(this).data('timeout', setTimeout(function () {
        $(".fancybox-title").stop(true, true).slideDown(200);
      }, 100));
    }, function () {
      clearTimeout($(this).data('timeout'));
    });
  }
});

请参阅JSFIDDLE ...它似乎在 IE7+ 和 FF 中运行良好