放置一個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

Answer 2

我想這應該讓你開始：JS Fiddle

.titlepicture { 
    width: 100%; 
    height: 200px; 
    background: red; 
    z-index: 50; 
    top: 0; 
    height: 0; 
    left: 0; 
    overflow: hidden; 
    -webenter link description herekit-transition: all .8s ease; 
    -moz-transition: all .8s ease; 
    -ms-transition: all .8s ease; 
    -o-transition: all .8s ease; 
    transition: all .8s ease; 
} 
.singleelement:hover .titlepicture { 
    margin-top: -110px; 
    height: 90px; 
} 
.singleelement:hover .title { 
    height: 140px; 
    background: green; 
    margin-top: -120px; 
} 
.title { 
    -webkit-transition: all .8s ease; 
    -moz-transition: all .8s ease; 
    -ms-transition: all .8s ease; 
    -o-transition: all .8s ease; 
    transition: all .8s ease; 
} 

Answer 3

的伎倆是基本的簡單。僅將z-index與位置一起應用：絕對，相對或固定。 所以我這樣做：

nav { 
    width: 100%; 
    height: 20px; 
    position: relative; 
} 
.navfake { 
    width: 100%; 
    height: 100%; 
    background: green; 
    z-index: 10; 
    position:relative; 
} 
.singleelement { 
    display: inline-block; 
    width: 100px; 
    height: 60px; 
    text-align: center; 
} 
.container { 
    position: absolute; 
    top: 0px; 
    -webkit-transition: all .8s ease; 
     -moz-transition: all .8s ease; 
     -ms-transition: all .8s ease; 
     -o-transition: all .8s ease; 
     transition: all .8s ease; 
    height: 200px; 
} 
.titlepicture { 
    position:absolute;   /*THIS ADDED*/ 
    width: 100%; 
    background-color: red; 
    z-index:10;   /*THIS ADDED*/ 
    height: 100px; 
    overflow: hidden; 
} 


.container:hover { 
    top: -80px; 
} 

.container:hover .titlepicture{ 
    height:100px; 
    z-index:10; 

} 

.title{       /*THIS ADDED*/ 
    z-index:555; 
    position:relative; 
    height: 20px; 

} 

.footer{ 
    position: relative; 
    z-index: 1000; 
    background-color: white; 
} 

HTML

<div style="">some text blablablablablablabla 
    <br/>some text blablablablablablabla 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>xxx 
</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> 

<div class="footer">some text blablablablablablabla 
    <br/>some text blablablablablablabla 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>some text 
    <br/>xxx 
</div>