老师，为什么最后一个div类名seventh必须要在里面添加p标签，当我不添加p标签时，鼠标只能跟着盒子才能继续过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡的基本使用</title>
<style>
* {
margin: 0;
padding: 0;
}
.first {
width: 100px;
height: 100px;
background-color: yellow;
transition: width 1s linear 0s;
}
.first:hover {
width: 600px;
}
.second>p {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
transition: left 1s linear 0s;
}
.second:hover>p {
left: 500px;
}
.third {
width: 100px;
height: 100px;
background-color: yellow;
transition: background-color 2s linear 0s;
}
.third:hover {
background-color: blue;
}
.fourth {
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 0;
transition: border-radius 1s linear 0s;
}
.fourth:hover {
border-radius: 50%;
}
.fifth {
width: 100px;
height: 100px;
background-color: purple;
transition: transform 1s linear 0s;
}
.fifth:hover {
transform: rotate(360deg);
}
.sixth {
width: 100px;
height: 100px;
perspective: 200px;
background-color: yellow;
border: 2px dotted black;
transition: transform 1s linear 0s;
}
.sixth:hover {
transform: rotate(360deg) rotateY(360deg);
}
.seventh>p {
width: 100px;
height: 100px;
position: relative;
left: 0;
background-color: pink;
border-radius: 0;
perspective: 300px;
transition: all 3s linear 0s;
}
.seventh:hover>p {
width: 600px;
background-color: #ff0;
border-radius: 50%;
left: 600px;
transform: rotateY(360deg) rotateX(360deg);
}
</style>
</head>
<body>
<!-- 用width属性过渡 -->
<div class="first"></div>
<!-- 用left属性过渡 -->
<div class="second">
<p></p>
</div>
<!-- 背景颜色过渡 -->
<div class="third"></div>
<!-- border-radius属性过渡 -->
<div class="fourth"></div>
<!-- 2D旋转过渡 -->
<div class="fifth"></div>
<!-- 3D旋转过渡 -->
<div class="sixth"></div>
<!-- all属性过渡 -->
<div class="seventh">
<p></p>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星