Triggering: hover on non-child elements

Question

Effect required: when hovering on a circle, the background of all 4 blocks takes on the same color as the background of the circle. How to do it?

#blocks { position: relative; } .block { display: inline-block; outline: 1px dashed #000; width: 48%; height: 50px; margin: 3px; text-align: center; transition: all linear 1s; } .circle { background: black; width: 100px; height: 100px; border-radius: 50%; margin: 10px auto; } .circle:hover { background: gray; }

 <div id="blocks"> <div class="block">Blog</div> <div class="block">Projects</div> <div class="block">Work tools</div> <div class="block">CV</div> </div> <div class="circle"></div>

Yuri Kopot Yuri Kopot 1,855 5 silver marks 12 bronze marks · Accepted Answer · 2018-05-07T10:39:34

Use flex Set the circle above, and through the order flip down. Further through the next selector

 .wrapper { display: flex; flex-wrap: wrap } #blocks { position: relative; width: 100%; } .block { display: inline-block; outline: 1px dashed #000; width: 48%; height: 50px; margin: 3px; text-align: center; transition: all linear 1s; } .circle { order: 2; background: black; width: 100px; height: 100px; border-radius: 50%; margin: 10px auto; } .circle:hover { background: gray; } .circle:hover + #blocks .block { background: gray; }

 <div class="wrapper"> <div class="circle"></div> <div id="blocks"> <div class="block">Blog</div> <div class="block">Projects</div> <div class="block">Work tools</div> <div class="block">CV</div> </div> </div>

Triggering: hover on non-child elements

1 answer 1

More articles: