jquery菜單懸停

我有一個菜單，當我把鼠標放在一個div上時，它會顯示，在鼠標上它會淡出。問題是，如果您翻轉菜單的任何子菜單，菜單將消失（因爲從技術上講，如果您對其中一個孩子，那麼您沒有超過父母）有沒有辦法讓孩子滾動算作鼠標？這是我的代碼：http://jsfiddle.net/32bLg/jquery菜單懸停

來源

2012-02-07 zero

這是一個非常簡單的問題，大多數人往往大量過度計時器和特殊情況下的檢查。簡單的解決方案是通過標記。將懸停目標和菜單放置在同一父級下，並跟蹤父級上的懸停。 Like this。您可能還想使用hoverIntent jQuery插件來避免虛假懸停事件。

用戶體驗筆記：持續超過500毫秒的淡入淡出動畫只是粗魯。請不要這樣做。

來源

2012-02-07 22:33:05

最優秀的。就像在生活中，最簡單的答案通常是正確的答案。還有500毫秒只是爲了測試，對於大多數人來說這太快了，無論如何...感謝兄弟。 – zero 2012-02-07 22:45:37

當我嘗試將鼠標移入和移出菜單時，出現了一些問題。'now fadeOut'之前..鼠標放在examplePic中，然後鼠標移出。再次用鼠標調整動畫。 – 2012-02-07 22:50:34

@SKS是的，使用常規的'懸停'事件+長動畫可以做到這一點。切換到'hoverIntent'和短的動畫，你不會看到。 – 2012-02-08 12:37:06

這裏有一個簡單的解決方案： http://jsfiddle.net/32bLg/16/

來源

2012-02-07 22:33:33 sally

我喜歡使用setTimeout +1的想法。 – 2012-02-07 22:37:54

查閱這些很好的例子：

Nice JQuery menus

特定多一個：

Multilevel JQuery menu

從鏈接2 HTML：

<ul id="nav"> 
    <li><a href="#">1 HTML</a></li> 
    <li><a href="#">2 CSS</a></li> 
    <li><a href="#">3 Javascript</a> 
     <ul> 
      <li><a href="#">3.1 jQuery</a> 
       <ul> 
        <li><a href="#">3.1.1 Download</a></li> 
        <li><a href="#">3.1.2 Tutorial</a></li> 
       </ul> 
      </li> 
      <li><a href="#">3.2 Mootools</a></li> 
      <li><a href="#">3.3 Prototype</a></li> 
     </ul> 
    </li> 
</ul>

CSS：

#nav, #nav ul{ 
     margin:0; 
     padding:0; 
     list-style-type:none; 
     list-style-position:outside; 
     position:relative; 
     line-height:1.5em; 
    } 

    #nav ul ul{ 
    top:auto; 
    } 

#nav li ul ul { 
    left:12em; 
    margin:0px 0 0 10px; 
    } 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display:none; 
    } 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ 
    display:block; 
    }

JS：

function mainmenu(){ 
$(" #nav ul ").css({display: "none"}); // Opera Fix 
$(" #nav li").hover(function(){ 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
     },function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
     }); 
} 

$(document).ready(function(){ 
    mainmenu(); 
});

來源

2012-02-07 22:34:08 Kris

您需要包含懸停div中的菜單股利。請參閱http://jsfiddle.net/T72jm/2/。

您會注意到（至少在Chrome中），如果將鼠標懸停在懸停div上並且不執行任何操作，則菜單div將淡出。

來源

2012-02-07 22:35:20 villecoder

這是我修復

window.menushowing = false; 

$('#menu').hover(

function() { 
    window.menushowing = true; 
}, function() { 
    window.menushowing = false; 
    hideMenu(); 
}); 

function hideMenu() { 
    if (window.menushowing) return; 
    $('#menu').animate({ 
     opacity: 0 
    }, 1500, function() { 
     $('#menu').hide(); 
    }); 
} 

$('#examplePic').hover(

function() { 
    window.menushowing = true; 
    $('#menu').css('display', 'block'); 
    $('#menu').animate({ 
     opacity: 1 
    }, 1500); 

}, function() { 
    hideMenu(); 
});

來源

2012-02-07 22:42:05 ComputerSaysNo

jquery菜單懸停

回答

相關問題