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

【问题标题】：Show/hide title unreliable in FancyBox 2.x在 FancyBox 2.x 中显示/隐藏标题不可靠
【发布时间】：2013-10-10 18:40:21
【问题描述】：

尝试在 Fancybox 2 中实现显示标题助手的一致行为。我希望当鼠标指针位于花式框窗口（在 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： 我可以模拟所需的行为，而不是悬停，而是 mouseover 事件，但是它具有已知的令人不快的副作用，它会在进入/离开每个内部时触发元素。

【问题讨论】：

标签： javascript jquery css fancybox fancybox-2

【解决方案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/

【讨论】：

+1 ：我不得不承认。你的回答比我的好很多。我不喜欢使用setTimeout/clearTimeout 也不喜欢嗅探浏览器类型（IE）我希望 OP 会给你赏金；）
我只是建议将.ready() 方法绑定到document jsfiddle.net/ueS3V
虽然是一种解决方法，但我最喜欢简单的解决方案（不是更简单）。你得到了赏金和我的支持！恭喜。

【解决方案2】：

我对@987654321@的原始答案做了一些调整。

基本上有两个问题：

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

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

无论鼠标是否为hover，总是在afterShow 回调中首先触发。解决方法是在决定是否隐藏 title 之前验证鼠标是否为hovering 的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 状态，这是多余的（并且有错误和混乱），所以我在第一个 .hover() 方法中移动了 setTimeout/clearTimeout 函数用于显示/隐藏鼠标上的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

现在，您可以使用花式框导航箭头（点击时）或键盘箭头在图库中导航。 title 将在（如果只有）鼠标指针是 hover 时出现。

它似乎在 Firefox、Chrome、Opera、Safari 和（当然）IE 中始终如一地工作。

【讨论】：