为什么动画不适用于块 2,而块是相邻的。
作业说只使用 css。
问题是什么 ?
.block {
width: 70px;
height: 20px;
position: absolute;
color: white;
padding: 5px;
border: 3px inset white;
}
.block1 {
top: 80px;
left: 100px;
background-color: #1E90FF;
}
.block2 {
top: 0;
left: 100px;
background-color: #26ff4e;
transition: left 1s;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
}
.block3 {
top: 40px;
left: 10px;
background-color: #ff3f36;
transition: left 1s;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
}
.block1:hover ~ .block2 {
left: 0;
}
.block1:hover ~ .block3 {
left: 100px;
}
<div class="block block2">block 2</div>
<div class="block block1">block 1</div>
<div class="block block3">block 3</div>
我假设视图条目
.block1:hover ~ .block2
仅适用于 AFTER 之后的块.block1
,这是它的工作原理: