在基於鼠標功能的同一類的「李」標籤中顯示只有一個「李」

我自己在JavaScript的開始階段想實現以下目標。我有一些李標籤，這樣的標籤。在基於鼠標功能的同一類的「李」標籤中顯示只有一個「李」

<ul> 
<li><a href="" class="1"></a> 
     <ul> 
     <li class="2"></li> 
     <li class="2"></li> 
     <li class="2"></li> 
     </ul> 
</li> 
<li><a href="" class="1"></a> 
     <ul> 
     <li class="2"></li> 
     <li class="2"></li> 
     <li class="2"></li> 
     </ul> 
</li> 
</ul>

現在2級塊在page.My工作原本隱藏的是當有人1類的鏈接其相應的塊（即等級2）應display.But我寫的代碼上懸停顯示具有2級所有塊可能是我可以寫爲1類的每個環節鼠標懸停（）函數，但它是正確的嗎？我已經看到在一些網站，如聯在這種類型的效果，awwwards.com

示例鏈接是 Best Colorful Websites | Web Design Inspiration

在這個鏈接中，當鼠標懸停在圖像上時，只有在該圖像上的符號顯示在角落的底部，我想要這種類型的效果。

任何請幫助我??在此先感謝??

來源

2014-07-04 Ganapathi004

在jsFiddle上放一些代碼 –

你能告訴我什麼是j sFiddle？ – Ganapathi004

是一個在線測試環境...你在jsFiddle上的例子：http://jsfiddle.net/Dfv3P/1/ ...在此之後，任何人都可以更新/修復它後 –

嗯，這隻能與CSS來achived：

ul ul{ 
    display:none; 
} 

ul > li:hover ul{ 
    display:block; 
}

來源

2014-07-04 08:18:21 Jai

即，除了懸停的所有ul標籤是被這種風格規則所隱藏。不是嗎？ – Ganapathi004

起初，所有的ULs都隱藏起來......在li懸停的情況下，li裏面的ul顯示爲 –

但是如果我想在懸停時應用一些滑動？ – Ganapathi004

嘗試一個快速的CSS的解決方案（未測試，因爲你沒有把jsFiffle代碼axample）

ul li:hover ul li.2 
{ 
    display:block; 
}

還，不使用只有類名中的數字......在某些瀏覽器上不起作用嘗試class="c2"至少

來源

2014-07-04 08:19:24

這裏只是使用了類名 – Ganapathi004

查看這個http://jsfiddle.net/Dfv3P/1/ –

緩解了你的最新評論，我更新了jsfiddle版本http://jsfiddle.net/Dfv3P/2/ –

在基於鼠標功能的同一類的「李」標籤中顯示只有一個「李」

回答

相關問題