css - 如何突出显示未悬停在悬停上的 div

Question

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

我怎么能用这个html结构做到这一点？

这是一个样本：

<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;
      }
    }

当我悬停时我想要这个：

标签： csssasshover

Answer 1

我会这样做：

• 将盒子放在容器 div 中，
• 设置容器默认 bgcolor 红色和悬停 bgcolor 黄色，
• box 默认 bgcolor none 和 hover bgcolor green