Question

第一篇文章，提前道歉。

我正在使用它 How to display fancybox title only on image hover 除了单击上一个/下一个并且光标已经悬停，标题不会出现时，它必须将鼠标悬停并再次返回。

如果您在图片加载时已经悬停，那么知道如何显示标题吗？

此处示例 http://www.richardbarry.co.uk/fancyhover.php

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

任何帮助非常感谢

Answer 1

作为一种解决方法，您可以尝试添加一个函数来检测鼠标是否已经像this post中那样悬停了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

中正常工作

Fancybox 2标题悬停在图库更改上

1 个答案: