显示另一个元素与悬停

我有这样的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

显示另一个元素与悬停

回答

相关问题