所以情况是我们开始的时候:
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;
}
最佳答案
听起来您只需要简单的 css 下拉菜单,对吗?如果是这样,请检查并按照每个步骤进行操作,这可能会有所帮助。
关于css - 将 div 的父兄弟放在 div 的前面,并使 div 在鼠标悬停时滑出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22948431/