如何突出显示悬停时未悬停的div

Question

当我将鼠标悬停在 div 上时，背景颜色变为绿色，但当我悬停时，我希望其他 div 变为黄色

如何使用这个 html 结构来实现？

这里是 sample:

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>


    .box{
      background-color:yellow;
      width: 100px;
      height: 100px;
      border:black solid 1px;
      margin: auto;
      display:flex;
      justify-content:center;
      align-items:center;
      transition: all 300ms;
      &:hover{
        background-color:green;
      }
    }

我悬停时想要这个：

Answer 1

我会这样做：

将箱子放入容器 div、
设置容器默认 bgcolor red 和 hover bgcolor yellow，
框默认 bgcolor none 和悬停 bgcolor 绿色

如何突出显示悬停时未悬停的div

how to hightlight divs that not being hovered on hover

css

sass

hover