hover 超过一个但影响另一个 css

Question

我的问题很简单，我没有找到直接的答案，所以在这里：我有两个盒子，我想 hover 第一个但影响第二个（当悬停第一个时，第二个应该这样做（转换：比例（1.2） ; 过渡：所有 0.9 秒缓进出；))。 是否可以使用 css 或还需要 javascript？ 我的代码：

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

使用 css，您应该能够将+用于直接兄弟或~用于某些间接兄弟

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

Answer 2

您应该使用组合器选择器。

 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 超过一个但影响另一个 css

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-12-26 22:35:56

解决方案2
1 2020-12-26 22:38:02

hover 超过一个但影响另一个 css

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-12-26 22:35:56

解决方案2 1 2020-12-26 22:38:02

解决方案1
1 已采纳 2020-12-26 22:35:56

解决方案2
1 2020-12-26 22:38:02