请检查代码是否规范和正确
来源：2-9 自由编程
烫头的狮子王
2021-01-15 17:36:07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 240px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.info {
width: 300px;
height: 30px;
position: absolute;
background-color: #000;
bottom: -10px;
line-height: 30px;
color: white;
opacity: 0;
transition: all 0.5s linear ;
}
.info:hover {
bottom: 0;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">
<img src="./imgs/duck.png" alt="">
<div class="info">
<p>我是一只小黄鸭</p>
</div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，效果图中是当鼠标移动到图片上的时候，文字就会显示，并不是只有鼠标移动到p的时候才会显示文字，结构中一个div里面放一个文字标签p和一个图片标签img就可以，具体如下：
祝学习愉快！
0
相似问题