Question

我有2个div元素。

<div id='container'>
 <div class="click_menu yellow">
  <p><a href="#">Hover Me</a></p>
  <p class="subtext">The front page</p>
 </div>
 <div class="content"> <p>Content</p> </div>
</div>

当我悬停在第一个div上时，我想滑过第二个div的顶部。不要推倒它。

JSFiddle Link

我该怎么做？

由于

Answer 1

不确定我是否理解了您的问题，但看看是否有帮助

使用以下CSS：

.click_menu{
    position:relative;
    z-index : 1;
}
.content {
    position:absolute;
    top: 58px;
}

因此，当z-index为1时，相对div将超过绝对div。

JSFIDDLE

Answer 2

您可以在css下面进行更改

.content {
    margin-top:50px;//added
    position:absolute;//changed
    clear: both;
    width:100px;
    height:50px;
    background:#D52100;    
}

.click_menu{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    position: absolute;// added
    z-index: 100;//added
}

<强> Demo

Answer 3

除非你想要做一些真正定制的事情，否则重新发明轮子毫无意义。 Bootstrap为你做了很多工作。

http://getbootstrap.com/components/#nav-dropdowns

Div滑动在另一个div的顶部

3 个答案: