ps:
1.最外层盒子需设置相对定位，盒子里的元素设置绝对定位；
2.最外层盒子必须设置溢出隐藏overflow:hidden；
3.设置过渡时需要在hover里和div里都加上transition属性；
4.设置transition时为保证浏览器兼容需加上：-webkit-transition和-moz-transition；
4.设置鼠标移入事件时:hover正确书写方式，注意空格
正确#box:hover #div1；
<DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
width:500px;
height:300px;
margin:100px auto;
}
#img{
position:absolute;
width:100%;
height:100%;
bottom:0;
transition:bottom 2s ease-in-out;
}
#div1{
position:absolute;
width:100%;
height:100%;
top:100%;
background-color:royalblue;
transition:all 2s ease-in-out;
}
#box:hover #img{
bottom:100%;
}
#box:hover #div1{
top:0;
}
</style>
</head>
<body>
<div id="box">
<img id="img" src="images/1.png">
<div id="div1">
<h3>悯农</h3>
<p>锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆幸苦。</p>
</div>
</div>
</body>
</html>
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
