如何突出显示悬停时未悬停的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的绿色框悬停