mouseleave爲兩個元素來隱藏另一個div

我需要我的子菜單div只有當li項目和子菜單本身沒有被徘徊時纔會消失。mouseleave爲兩個元素來隱藏另一個div

CSS解決方案不會在這裏工作，因爲我需要使用第一個孩子懸停和子菜單div不是子元素。

我已經搜索論壇，但無法找到解決方案，當子菜單不是鋰項目的孩子。

HTML：

<ul id="top-menu"> 
<li>item 1</li> 
<li>item 2</li> 
<li>item3</li> 
</ul> 

<!-- somewhere else in DOM (not directly after or child of menu) --> 

<div id="#menu1_expansion"> 
sub menu1 content 
</div>

的jQuery：

 $(document).ready(function() { 
    $('#top-menu li:nth-child(1)').hover(
    function() 
    { 
     $('#menu1_expansion').stop(); 

     if ($('#menu1_expansion:hidden')) 
     { 
      $('#menu1_expansion').show(); 
     } 

    } 
); 
$('#menu1_expansion').mouseleave(function(){ $('#menu1_expansion').hide(); }); 
});

CSS：

#menu1_expansion {display:none; position:absolute;}

目前這得到子菜單出現在李項懸停和子菜單中消失，當鼠標離開，但我需要子菜單隱藏時，它和李項目是mouseleave - 任何人都可以建議如何做到這一點？謝謝。

來源

2013-02-03 Defender420

不把你的'＃menu1_expansion'李中和做，在2中的任何正當的理由css行？ – mikakun

嗨，我將這添加到一個CMS（sitecore），因此無法將子菜單放在li項目中 – Defender420

錯誤，您可以用js將它添加到li裏面（如果您不知道如何自定義服務器腳本） – mikakun

如果您想要顯示一次＃menu1_expansion並將其保持可見：請嘗試使用mouseover（）而不是懸停。

只有當您懸停對象時纔會觸發懸停功能，並且在未指向該元素時不會觸發懸停功能。

來源

2013-02-03 21:03:33

嗨，我已經使用你的建議，並將鼠標懸停在mouseover（）上，但是當li項目和子菜單都是mouseleave時，仍然需要隱藏子菜單div – Defender420

好，我找到一種方式來獲得它的工作中，代碼如下，如果它可以幫助別人：

   $(document).ready(function() { 
var count = 0; 
$('#top-menu li:nth-child(1), #menu_expansion').mouseenter(function(){ 
    count++; 
    $('#menu_expansion').show(); 
}).mouseleave(function(){ 
    count--; 
    if (count == 0) { 
     $('#menu_expansion').hide(); 
    } 
}); 


});

來源

2013-02-04 18:51:51 Defender420

mouseleave爲兩個元素來隱藏另一個div

回答

相關問題