下拉菜單在進入鏈接之前消失了

Question

看一下此頁面菜單中的游覽鏈接。 當我將鼠標懸停在巡視上時，它應該顯示菜單並讓我選擇要單擊的子菜單，但是它消失得太快了。

這是菜單的代碼：

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(function(){ 
    $(this).siblings('ul').fadeIn(150); },function(){ 
    $(this).siblings('ul').fadeOut(150); }
);

有人知道為什么會這樣嗎？

Answer 1

看起來像這樣簡單：

$('.menu > li').hover(
    function(){ 
        $(this).find('ul').fadeIn(150);
    },
    function(){
        $(this).find('ul').fadeOut(150);
    }
);

或者，對於智障老板：

$('.menu > li > a').mouseenter(function(){ $(this).siblings('ul').fadeIn(150); });
$('.menu > li').mouseleave(function(){ $(this).children('ul').fadeOut(150); });

Answer 2

150毫秒是很短的時間范圍。 請改用更長的時間范圍。

.hover(function(){ 
    $(this).siblings('ul').fadeIn(1500); },function(){ 
    $(this).siblings('ul').fadeOut(1500); }
);

您可能還希望在將鼠標懸停在子菜單上時保持其淡入淡出狀態。您需要更改選擇器（僅引用整個列表項，而不是僅引用鏈接）。

樣品
http://jsfiddle.net/E4EjZ/

// INIT
$('.menu > li > ul').hide();

$('.menu > li').hover(function(){
    $(this).find('ul').fadeIn(1500); },function(){
    $(this).find('ul').fadeOut(1500); }
);

Answer 3

嘗試

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).mouseenter(function(){ 
    $(this).siblings('ul').fadeIn(150); }
).mouseleave(function(){ 
    $(this).siblings('ul').fadeOut(150); })

Answer 4

除了嘗試使用懸停外，您還可以嘗試在鼠標懸停時淡入並在鼠標懸停時淡出。 這可能會更好地適合您的情況，並讓您更好地控制每個單獨的事件。 查看此處發布的示例。

Answer 5

如果將鼠標指針停留在“游覽”鏈接上，您會發現它不會消失。 但是，當您將鼠標從a元素移開時，它會像預期的那樣逐漸消失。

如果您將懸停與父li元素一起使用，則它將對整個容器都有效，該容器既包含“ tour”鏈接，也包含您正在淡入的子菜單。