javascript - 悬停时更改框颜色

Question

好吧，假设你有方框 A、B 和 C，我正在尝试做到这一点，以便每当方框 A 悬停时，A、B 和 C 变为绿色，当方框 B 悬停时，它们都会变为绿色，当 C 悬停时，它们都变为绿色。这可能只使用 CSS 还是我必须使用 javascript 才能做到这一点？

Answer 1

使用 CSS 执行此操作的一种方法是基于悬停在父容器上进行触发，但将指针事件限制在子元素上。

.box {
padding: 40px;
display: inline-block;
margin: 20px;
background: grey;
transition: background .2s;
pointer-events: all;
}

.container {
  pointer-events: none;
}

.container:hover .box {
  background: chartreuse;
}

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>