如何突出显示悬停时未悬停的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红色，将鼠标悬停为bgcolor黄色，
• 框默认为bgcolor无，将鼠标悬停为bgcolor绿色