2

试图实现在 Fancybox 2 中显示标题助手的一致行为。我希望当鼠标指针位于花式框窗口（内部div.fancybox-wrap元素）上时显示标题 - 仅此而已。

尝试使用用户 JFK示例中的以下代码：

$(".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事件，但是它具有已知的令人不快的副作用，它会在进入/离开每个内部元素时触发。

4

2 回答 2

2

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

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/

于 2013-10-15T22:08:36.477 回答
1

我对这篇文章的原始答案做了一些调整。

基本上有两个问题：

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/函数，用于显示/隐藏on mouse 。clearTimeout.hover()titlehover

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

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

查看新的 JSFIDDLE

现在您可以使用fancybox 导航箭头（单击时）或键盘箭头来浏览图库。title如果（如果只有）鼠标的指针是花式框，就会hover出现。

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

于 2013-10-15T21:32:13.543 回答