Change element style when hovering on another element.

Question

It is necessary to change the style of six when hovering over three (by CSS)

 body { width: 200px; height: 200px; display: flex; justify-content: space-between; } .three { width: 20px; height: 20px; background-color: blue; } .six { width: 20px; height: 20px; background-color: yellow; }

 <div class="one"> <div class="two"> <div class="three"> </div> </div> </div> <div class="four"> <div class="five"> <div class="six"> </div> </div> </div>

Google and found nothing sensible

Here was a similar discussion. Decided by javascript - Yenin Artem 2:13

Qwertiy ♦ Qwertiy 76.3k 17 74 201 · Accepted Answer · 2019-03-06T13:56:45

In theory, this is impossible.

But you can fake a little. In chrome works, in the rest did not check.

 body { width: 200px; height: 200px; display: flex; justify-content: space-between; } .one, .four { outline: 1px dotted red; } .three { width: 20px; height: 20px; background-color: blue; } .six { width: 20px; height: 20px; background-color: yellow; } .one { pointer-events: none; } .three { pointer-events: all; } .one:hover ~ .four .six { background: red; }

 <div class="one"> <div class="two"> <div class="three"> </div> </div> </div> <div class="four"> <div class="five"> <div class="six"> </div> </div> </div>

Can you explain how, in this case, pointer-events: all works?
@ Dmytryk, again allows the element to respond to the mouse.
@PavelVarshavsky, cover it with a transparent block on top, which in the markup will be earlier than blue, but in the flex at the expense of the order will be in the right place))
@PaulVarshavsky, and still like this: ru.stackoverflow.com/a/521309/178988 .
@ Dmytryk, if I use my css answers, there are a lot of tricks to find there))

Rogatnev Nikita Rogatnev Nikita 1,536 four 27 · Answer 2 · 2019-03-06T13:36:39

Pure CSS doesn't do this only if the elements are on the same level.

CSS Selector Reference

 body{ width: 200px; height: 200px; display: flex; justify-content: space-between; } .three{ width: 20px; height: 20px; background-color: blue; } .six{ width: 20px; height: 20px; background-color: yellow; } .one:hover + .four .six{ background-color: blue; }

 <div class="one"> <div class="two"> <div class="three"> </div> </div> </div> <div class="four"> <div class="five"> <div class="six"> </div> </div> </div>

With jQuery it will be like this ( association ):

 $(function() { $('.three').hover(function() { $('.six').css('background-color', 'blue'); }, function() { // on mouseout, reset the background colour $('.six').css('background-color', 'yellow'); }); });

Change element style when hovering on another element.

2 answers 2

More articles: