懸停模式下的標籤，同時鼠標懸停在下拉菜單上

我如何在懸停下拉子菜單時讓選項卡處於懸停模式。它需要JavaScript還是隻能在CSS上完成？懸停模式下的標籤，同時鼠標懸停在下拉菜單上

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a> 
       <div class="column">      
        <ul> 
         <li class="subtitle">Button 1</li> 
         <li class="subtitle">Button 2</li> 
         <li class="subtitle">Button 3</li> 
      </div>   
     </li>

來源

2010-05-12 Hwang

正如matpol建議的那樣，您可以使用css來完成它，並使用css hover fix在IE中進行排序。作爲一個說明，你不需要那個div，你需要做的風格明智的一切都可以通過樣式化嵌套li元素來完成（你也需要關閉第二個ul元素）。我猜它只是一個快速完成的代碼片段，但我想我會提起來:)

更新;

Tbh無論下拉是多大，你不應該需要該級別的div（如果需要，你可以將它們放在<li>的位置）。

事情是這樣的......

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a> 
    <ul class="column"> 
    <li class="subtitle">Button 1</li> 
    <li class="subtitle">Button 2</li> 
    <li class="subtitle">Button 3</li> 
    </ul>   
</li> 

/* styles */ 


li#anchor:hover { 
    /* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */ 
} 

li#anchor ul.column { 
    display: none; 
    /* Styles for this ul, float, position etc */ 
} 

li#anchor:hover ul.column { 
    display: block; 
}

其未經測試，但我已經做了更多的這些比我照顧記住：P

來源

2010-05-12 11:49:56 Tom

我其實在做一個大型的下拉菜單=）代碼應該是正確的，但它目前不適用於我，也許我需要定位id/ul？ – Hwang 2010-05-12 13:24:14

我已經更新了我的答案，希望能多幫一些忙？ – Tom 2010-05-12 15:08:18

你可以用CSS做，但需要更老的crappier瀏覽器（ie6）的JS，例如

li .column{ 
    display: none; 
} 

li:hover .column{ 
    display: block 
}

IE6只支持懸停在錨標記，因此需要JS。

來源

2010-05-12 10:40:27 matpol

懸停模式下的標籤，同時鼠標懸停在下拉菜單上

回答

相關問題