将鼠标悬停在一个上但影响另一个 CSS答案

【问题标题】：hover over one but affect another css将鼠标悬停在一个上但影响另一个 CSS
【发布时间】：2021-04-04 06:15:56
【问题描述】：

我的问题很简单，我没有找到直接的答案，所以在这里：我有两个框，我想悬停第一个但影响第二个（悬停第一个时，第二个应该这样做（转换：比例（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="a b">Hover me</div>

<div class="c d">Affect me</div>

</body>
</html>

【问题讨论】：

标签： javascript html css hover css-transitions

【解决方案1】：

使用 css，您应该可以将 + 用于直接兄弟或将 ~ 用于间接兄弟

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

【讨论】：

【解决方案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="a b">Hover me</div>
<div class="c d">Affect me</div>

【讨论】：