css - 将 div 的父兄弟放在 div 的前面，并使 div 在鼠标悬停时滑出

Question

所以情况是我们开始的时候:

jsfiddle of situation where we start

它应该是一个菜单，菜单有一个链接，叫做一些标题。当您将鼠标悬停在“某个标题”上时，它后面的 div 应该滑出并进入视野。

所以第一阶段，什么都没发生，没有悬停的情况是这样的:

然后我们悬停它，它应该看起来像这样

我碰碰运气的代码:

<div style="height: 100px">some text blablablablablablabla <br/> some text blablablablablablabla <br/> some text <br/> some text <br/> some text <br/> some text <br/> some text <br/> </div>


 <nav class="navigation">
   <div class="navfake"></div>
        <div class="singleelement">
            <div class="container">
                <div class="title">
                    Some Title1
                </div>
                <div class="titlepicture">some picture</div>
            </div>
        </div>
        <div class="singleelement">
            <div class="container">
                <div class="title">
                    Some Title2
                </div>
                <div class="titlepicture">some picture</div>
            </div>
        </div>
    </nav>

CSS

nav {
  width: 100%;
  height: 60px;
  position: relative;
}

.navfake{
      width: 100%;
      height: 100%;
      background: green;
      z-index: 10;
  }

.singleelement {
    width: 100px;
    height: 60px;
    float: left;
    text-align: center;
}


.container{
    position: absolute;
    top: 0px;
   transition: transform 0.25s ease;
  }

 .singleelement .container:hover {
      transform: translate3d(0,-60px,0);
}

.titlepicture {
      width: 100%;
      height: 200px;
      background: red;
      z-index: -5;
      top: 0;
      left: 0;
    }

.title{
  z-index: 5;
}

Answer 1

听起来您只需要简单的 css 下拉菜单，对吗？如果是这样，请检查并按照每个步骤进行操作，这可能会有所帮助。

http://candpgeneration.com/toys/CSS3-dropdown-tut.php