将鼠标悬停在一个上但会影响另一个 css

Question

我的问题很简单，我没有找到直接的答案，所以在这里：我有两个盒子，我想悬停第一个但影响第二个（悬停第一个时，第二个应该这样做（转换：规模（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>

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

将鼠标悬停在一个上但会影响另一个 css

hover over one but affect another css

html

javascript

css

hover

css-transitions