顯示子菜單中徘徊，但不隱藏時未徘徊

HTML：

<ul class="multilevel"> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
<li> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</li> 
</ul>

CSS：

.multilevel > li {position: relative; display: inline-block} 
.multilevel ul {display: none; position: absolute;} 
.multilevel > li:hover ul {display: block;}

當懸停時，我想讓子菜單保持不動並不隱藏。是否有可能使用CSS？或者我需要使用jQuery（在我的情況下）。如果是的話，我該如何使用jQuery，以便在用css懸停時菜單保持不變？

來源

2015-04-18 Marco

如果使用opacity，而不是你能做到這一點display

.multilevel > li { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 
.multilevel ul { 
 
    opacity:0; 
 
    position: absolute; 
 
    transition:0s 100s; 
 
} 
 
.multilevel > li:hover ul { 
 
    opacity:1; 
 
    transition:0s; 
 
}

<ul class="multilevel"> 
 
    <li>...</li> 
 
    <li>...</li> 
 
    <li>...</li> 
 
    <li>Hover 
 
     <ul> 
 
      <li>...</li> 
 
      <li>...</li> 
 
      <li>...</li> 
 
     </ul> 
 
    </li> 
 
</ul>

它延長了懸停效果I SE t它到100s，你可以隨意更改它

來源

2015-04-18 11:23:58 Akshay

確實很好做。如果可以的話，我會加倍投票。 – Shaggy

@Shaggy謝謝你可以改變效果到1000s或東西，使它總是出現 – Akshay

是的，最好將延遲設置爲可笑的高點。根據佈局，您可能還需要將子菜單置於屏幕外，直到它被激活，所以它不會阻止任何後面的項目操作。 – Shaggy

有沒有明確的屬性，如在CSS.You的mouseenter /鼠標離開可以，而使用jquery MouseEnter事件顯示內UI元素：

$('.multilevel > li').mouseenter(function(){ 
    $(this).find('ul').show(); 
});

來源

2015-04-18 11:07:54

顯示子菜單中徘徊，但不隱藏時未徘徊

回答

相關問題