Question

尝试在Fancybox 2中实现显示标题助手的一致行为。当鼠标指针位于fancybox窗口（div.fancybox-wrap元素内）时，我想显示标题 - 只是和。

尝试使用来自用户JFK的example：

的以下代码

$(".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 hover
    $(".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'));
    });
  }
});

但是上面的示例在Chromium浏览器中不起作用。当鼠标指针位于图像的一侧（左侧或右侧）并且单击用于显示图库中的上一个或下一个时，标题将隐藏在新标题上 - 直到指针移动一点。

知道如何让它在Chrome / Chromium中运行吗？它在Firefox中没问题。

更新：当使用光标键调用下一个/上一个图像时，标题仍然隐藏，而鼠标指针仍位于.fancybox-wrap内。也无法在Chrome / Chromium中使用。

更新2：我可以模拟挂钩而不是悬停但鼠标悬停事件所需的行为，但是它具有已知的令人不快的副作用，它会在进入/离开每个内部时触发元件。

Answer 1

您可以跟踪鼠标位置，然后使用它来确定鼠标当前是否正在悬停 - 这不需要触发悬停事件（显然，如果鼠标不移动则不会）。

var lastMouseX,
    lastMouseY;

$(document).on("mousemove", function (e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});

$(".fancybox").fancybox({
    helpers: {
        title: {
            type: 'over'
        }
    },
    afterShow: function () {
        $(".fancybox-wrap").hover(function () {
            $(".fancybox-title").stop(true, true).slideDown(200);

        }, function () {
            $(".fancybox-title").stop(true, true).slideUp(200);
        });

        var fancyBoxWrap = $(".fancybox-wrap");
        var divTop = fancyBoxWrap.offset().top;
        var divLeft = fancyBoxWrap.offset().left;
        var divRight = divLeft + fancyBoxWrap.width();
        var divBottom = divTop + fancyBoxWrap.height();

        var currentlyHovering = lastMouseX >= divLeft && lastMouseX <= divRight &&
                                lastMouseY >= divTop && lastMouseY <= divBottom;

        if (currentlyHovering ) {
            $(".fancybox-title").stop(true, true).slideDown(200);
        } else {
            $(".fancybox-title").hide();
        }
    }
});

在http://jsfiddle.net/lhoeppner/8m4FD/

处小提琴

Answer 2

我对this post的原始答案进行了一些调整。

基本上有两个问题：

1）。这一行（在afterShow回调中）：

$(".fancybox-title").hide();

无论鼠标是否为afterShow，

总是首先在hover回调中触发。解决方法是在决定隐藏 hovering之前验证鼠标是否是title fancybox容器：

if ( !$('.fancybox-wrap:hover').length ) {
    // mouse is not hover
    $(".fancybox-title").hide();
}

但是，:hover伪类似乎在IE8及更低版本中不起作用。由于我们确实关心跨浏览器兼容性，因此我们需要为这些浏览器提供额外的解决方法，以便我们添加此变量

var isIE = navigator.userAgent.match(/msie [6-8]/i);

并验证所有浏览器：

if ( !isIE ) {
    if ( !$(".fancybox-wrap:hover").length ) {
        // mouse is not hover
        $(".fancybox-title").hide();
    }
} else {
    $(".fancybox-title").hide();
    $(".fancybox-wrap").wrap("<a id='fancyhover' class='fancyhover' />");
}

注意我们添加了元素#fancyhover.fancyhover（包装fancybox包装器），以便我们可以播放IE8的切换类解决方法 -

2）。我在第二个hover方法中验证了鼠标.hover()状态，这是多余的（并且错误和令人困惑）所以我在第一个中移动了setTimeout / clearTimeout个函数.hover()方法用于显示/隐藏鼠标title上的hover。

以下是完整的代码（我已决定将原始代码留下注释用于文档目的）：

var isIE = navigator.userAgent.match(/msie [6-8]/i);
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        helpers: {
            title: {
                type: "over"
            }
        },
        afterShow: function () {
            if ( !isIE ) {
                if ( !$(".fancybox-wrap:hover").length ) {
                    // mouse is not hover
                    $(".fancybox-title").hide();
                }
            } else {
                $(".fancybox-title").hide();
                $(".fancybox-wrap").wrap("<a id='fancyhover' class='fancyhover' />");
            }
            // shows/hides title on hover
            $(".fancybox-wrap").hover(function () {
                //$(".fancybox-title").stop(true,true).slideDown(200);            
                if ( isIE ) {
                    $("#fancyhover").toggleClass("fancyhover");
                    if ( !$("#fancyhover").hasClass("fancyhover") ) {
                        $(".fancybox-title").hide();
                    }
                }
                var $fancyWrap = $(this),
                    $fancyTitle = $fancyWrap.find(".fancybox-title");
                $fancyWrap.data("timeout", setTimeout(function () {
                    $fancyTitle.stop(true, true).slideDown(100);
                }, 200));
            }, function () {
                //$(".fancybox-title").stop(true, true).slideUp(200);
                clearTimeout($(this).data("timeout"));
                $(this).find(".fancybox-title")
                    .stop(true, true)
                    .slideUp(100);
            });
            /*
        // detects if mouse is already hover
        $(".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'));
        });
        */
        }
    });
}); // ready

参见 new JSFIDDLE

现在，您可以使用fancybox导航箭头（单击时）或键盘箭头浏览图库。 title将显示（如果仅）鼠标指针是hover fancybox。

它似乎在Firefox，Chrome，Opera，Safari和（当然）IE中保持一致。

在FancyBox 2.x中显示/隐藏标题不可靠

2 个答案: