Why does not the animation for block2 work, the blocks are adjacent.
The task indicated to use only css.
What is the problem ?

.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>

1 answer 1

I assume that a .block1:hover ~ .block2 works only for blocks that are AFTER .block1 , this is how it works:

 .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>

  • without touching the meaning of your answer, Saint- transition has long been worth writing without any prefixes. - Sasha Omelchenko