主页 / 问题 / 620655
Accepted
jashka
Asked:2020-01-29 02:27:18 +0800 CST2020-01-29 02:27:18 +0800 CST

为什么动画不适用于 block2

  • 772

为什么动画不适用于块 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>

html

1 个回答

  1. Best Answer

    我假设视图条目.block1:hover ~ .block2仅适用于 AFTER 之后的块.block1，这是它的工作原理：

    .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 block1">block 1</div>
<div class="block block2">block 2</div>
<div class="block block3">block 3</div>

    • 1

相关问题