顯示另一個元素與懸停

我有這樣的HTML代碼顯示另一個元素與懸停

<div class="dropdown"> 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement"> 
      <i class="fa fa-inbox icon-menu"></i> 
          1. Tab 
        </a> 
      <ul class="dropdown-menu"> 
       <li>sub-step1</li> 
      </ul> 
    </div>

這是一個標籤欄，當我點擊下拉菜單是開放的（下拉菜單）與subteps回暖。

到目前爲止，我用鼠標懸停的方式來實現，而不是鼠標懸停在下拉菜單上的顏色變化。但我想要的是，當我將鼠標懸停在下拉菜單上時，下拉菜單將顯示而不必點擊。

這裏我的CSS：

.dropdown:hover { 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 

.dropdown-menu { 
    width: 211px; 
    border-color: #efefef; 
    border-width: 3px; 
    background-clip: padding-box; 
    background-color: #ffffff; 
    border-radius: 0 0 7px 7px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    display: none; 
    float: left; 
    font-size: 12px; 
    left: 0; 
    list-style: outside none none; 
    margin: 0px 0 0; 
    min-width: 160px; 
    padding: 5px 0; 
    position: absolute; 
    top: 100%; 
    z-index: 1000; 
}

我讀/嘗試沒有成功是什麼做到這一點在懸停。

.dropdown:hover + .dropdown-menu { 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
}

有人可以指點我在正確的方向嗎？

還有一個問題。一旦我做了懸停工作。有了這個CSS代碼，我怎麼能用動畫打開下拉菜單，讓我們從上到下說。

來源

2015-05-03 paul

您需要添加下面的CSS：

.dropdown:hover .dropdown-menu { 
    display: block; 
}

這將設置.dropdown-menu到display: block;時.dropdown盤旋。

.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown:hover { 
 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
} 
 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 
.dropdown-menu { 
 
    width: 211px; 
 
    border-color: #efefef; 
 
    border-width: 3px; 
 
    background-clip: padding-box; 
 
    background-color: #ffffff; 
 
    border-radius: 0 0 7px 7px; 
 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
 
    display: none; 
 
    float: left; 
 
    font-size: 12px; 
 
    left: 0; 
 
    list-style: outside none none; 
 
    margin: 0px 0 0; 
 
    min-width: 160px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    top: 100%; 
 
    z-index: 1000; 
 
}

<div class="dropdown"> 
 
    <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement"> 
 
      <i class="fa fa-inbox icon-menu"></i> 1. Tab 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
     <li>sub-step1</li> 
 
    </ul> 
 
</div>

來源

2015-05-03 07:29:48

的作品就像一個魅力！謝謝 – paul

我用這個問題問1兩件事沒有關係。如果你知道如何做到這一點，會很棒，再次感謝！ – paul

@paul http://jsfiddle.net/ecnq2wpb/是您可以爲其設置動畫效果的一種方式。 –

試試這個

.dropdown:hover .dropdown-menu { 
    display: block; 
}

FIDDLE EXAMPLE

來源

2015-05-03 07:30:05 Merlin

謝謝你的作品像一個魅力 – paul

總是很好幫助 – Merlin

顯示另一個元素與懸停

回答

相關問題