Question

我尝试制作一个向上滑动的面板，显示一个带有css / jquery的隐藏菜单如果您查看此链接http://www.responsivefilemanager.com/filemanager/dialog.php，您会注意到当您将鼠标悬停在文件上时，会显示隐藏的菜单。有人能举例说明我如何才能做到这一点吗？

Answer 1

试试这个。

http://jsfiddle.net/aqm7kjbg/2/

<强> HTML

<div class="main">
 <div class ="samp1">
    Content
 </div>
 <div class="description">
    Description
 </div>
 <div class="icon">
    Icon
 </div>
</div>

<强> CSS

.main{
 width:100%;
 height:140px;  

}
.samp1{

 background-color:grey;
 padding:10px 10px 20px 10px;

}
.description{
 position:absolute;
 background-color:red;
 width:97.1%;
}
.icon{
 background-color:blue;

}

<强> JQUERY

$('.main').hover(function(){
  $('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
  $('.description').animate({'margin-top': '0px'}, 500);
})

Answer 2

Demo

HTML

<br/><br/><br/>

<div class="container-two-div">
    <div class="contain-things back">
        Back
    </div>
    <div class="contain-things front">
        File
    </div>
</div>

CSS

.container-two-div , .contain-things
{
    height:50px;
    max-height:50px;
    min-height:50px;
    overflow:visible;
    background-color:gray;
    width:100px;
}

.front
{
    position:relative;
    top:-50px;
    transition: all 1s; /* transition when the mouse over */
    background-color:red;
    color:white;
}

.container-two-div:hover .front
{
    top:-100px;
}

Css / Jquery上滑面板

2 个答案: