在FancyBox 2.x中顯示/隱藏標題不可靠

Question

嘗試實現在Fancybox 2中顯示標題助手的一致行爲。 當鼠標指針位於fancybox窗口（內部爲div.fancybox-wrap元素）時，我想要標題顯示 - 只要。

試圖使用從下面的代碼用戶肯尼迪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決定之前的fancybox容器隱藏的title與否：

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上顯示/隱藏title的第一個.hover()方法內移動了setTimeout/clearTimeout函數。

下面是完整的代碼（我已決定離開註釋掉以作記錄原碼）：

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瀏覽器上工作。