檢測懸停並點擊透明格

我覺得這個問題以前一定要問過，但我不知道找到答案的正確術語。檢測懸停並點擊透明格

我有一個transparent div作爲命中區域。當用戶將鼠標懸停在該區域上時，菜單欄會在屏幕上呈現動畫。問題是如果光標移動到這個菜單上，隱藏菜單的動畫開始。它沒有意識到光標在它上面。我可以通過使命中區域的Z索引高於菜單來解決這個問題，但菜單按鈕不能點擊。

這是我的代碼。有任何想法嗎？

http://jsfiddle.net/92dYt/1/

CSS

#menu{ 
    position:fixed; 
    top:-40px; 
    left:0px; 
    width:100%; 
    height:40px; 
    background-color:#000; 
    z-index:50; 
} 
#hitarea{ 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:150px; 
    background-color:#eee; 
    z-index:49; 
    opacity:0; 
}

HTML

<div id="menu"></div> 
<div id="hitarea"></div>

JAVASCRIPT

$("#hitarea").hover(
    function() { 
     $('#menu').delay(500).animate({ 
      top: 0 
      }, 500, function() { 
      // Animation complete. 

     }); 
    }, 
    function() { 
    $('#menu').delay(500).animate({ 
     top: -40 
     }, 500, function() { 
     // Animation complete. 

    }); 
    } 
);

來源

2012-06-10 Joe Hamilton

我並不真正瞭解JQuery，但我會說，如果您檢測到它們移開，請在關閉它之前檢查它們是否在另一個項目上。我想你可以使用一個全局變量，當你將鼠標懸停在相關的項目上時進行編輯。 –

嗨，你可以通過更新你的代碼在這裏jsfiddle顯示一些真正的行動：http://jsfiddle.net/dharmavir/92dYt/？ – Dharmavir

我試過之前，但它不工作。我只是意識到我不得不選擇側邊的jquery ....在這裏。仍然不工作 - http://jsfiddle.net/92dYt/1/ –