老师，鼠标点击后小鸭鸭慢慢向上移动这条属性不知道该怎么加。能指导下吗？
来源：2-9 自由编程
Vigorous阿炎
2020-10-21 18:33:09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡与动画2-9</title>
<style>
*{
margin: 0;
padding: 0;
}
.A{
position: relative;
width: 300px;
height: 240px;
}
.A .a1 p{
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: rgb(224, 69, 69);
opacity: 0;
}
.A:hover .a1 p{
opacity: 1;
}
</style>
</head>
<body>
<div class="A">
<img src="images/duck.png" width="300px" height="240px">
<div class="a1">
<p>我是一只小鸭鸭</p>
</div>
</div>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
3回答
-
好帮手慕星星
2020-10-22
同学你好，前面这句话不太理解想要表达的意思：
A是父盒子，设置高度之后，添加overflow:hidden;属性并不是清除浮动，因为代码中并没有浮动的元素。overflow:hidden;属性还有自己本身的作用，超出隐藏。p元素一开始设置bottom值为-30px，超出了A盒子，加上overflow:hidden;属性就看不到了。
当移入的时候p元素bottom值变为0，在A盒子中，这样就看到了。
祝学习愉快！
0h020-10-22 -
Vigorous阿炎
提问者
2020-10-21
老师，我试了下确实把A不设置高度可以把小鸭鸭遮住，但是需要加清除浮动！
为什么A会把小鸭鸭覆盖呢，还有为什么要加清除浮动？0 -
好帮手慕星星
2020-10-21
同学你好，任务要求中说的是通过改变定位top值来改变显示位置
而同学的代码中用的bottom，这样也可以实现。参考：
1、p元素默认是显示的，定位在盒子下面-30px处
2、外层大盒子div.A可以设置超出隐藏，这样就看不到p元素了
3、移入的时候改变定位bottom值为0
4、给p添加过渡，这样就会有上移的过渡效果
祝学习愉快！
0
相似问题