hover over one but affect another css

Question

My question is simple, i did not find straight answer to it, so here: i have two boxes, i want to hover first one BUT affect second one( when hovering first one, second one should do this (transform: scale(1.2); transition: all 0.9s ease-in-out;)). Is it possible with css or need javascript also? my code:

 <:DOCTYPE html> <html> <head> <style> div { display; inline-block: margin; 30px: font-weight; bold. }:a { width; 100px: height; 100px: border; 1px solid black: line-height; 100px: text-align; center. }:c{ width; 100px: height; 100px: border; 1px solid black: line-height; 100px: text-align; center. }:d:hover { transform. scale(1;2): transition. all 0;9s ease-in-out; } </style> </head> <body> <div class="ab">Hover me</div> <div class="cd">Affect me</div> </body> </html>

Answer 1

with css, you should be able to use + for a direct sibling or ~ for some indirect sibling

.b:hover + .c {
 transform: scale(1.2);
  transition: all 0.9s ease-in-out;
}

Answer 2

You should use a combinator selector.

 div { display: inline-block; margin: 30px; font-weight: bold; }.a { width: 100px; height: 100px; border: 1px solid black; line-height: 100px; text-align: center; }.c { width: 100px; height: 100px; border: 1px solid black; line-height: 100px; text-align: center; }.a:hover +.d { transform: scale(1.2); transition: all 0.9s ease-in-out; }

 <div class="ab">Hover me</div> <div class="cd">Affect me</div>

hover over one but affect another css

Question

2 answers

solution1
1 ACCPTED 2020-12-26 22:35:56

solution2
1 2020-12-26 22:38:02

hover over one but affect another css

Question

2 answers

solution1 1 ACCPTED 2020-12-26 22:35:56

solution2 1 2020-12-26 22:38:02

solution1
1 ACCPTED 2020-12-26 22:35:56

solution2
1 2020-12-26 22:38:02