图片列表鼠标悬停时全体触发放大效果，如何修改实现仅单个图片触发？

嘿，问题很明显啦——你现在把hover事件绑定到了整个#homebrands容器上，所以只要鼠标碰到这个容器里的任何区域，所有图片都会一起放大。咱们只需要把hover的触发目标调整到单个图片的父元素.brand上就行，具体修改方法如下：

修改后的CSS代码 #

#homebrands {
  .brands {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .brand {
      position: relative;
      padding: 0 1rem 0 1rem;
      .figure {
        transition: transform 0.4s;
      }
      /* 把hover/focus事件绑定到单个品牌项上 */
      &:hover, &:focus {
        .figure {
          transform: scale(1.2) rotate(0.01deg);
        }
      }
    }
  }
}

关键修改点说明 #

原来的代码是监听整个#homebrands容器的hover状态，触发所有.brand下的.figure缩放。现在我们把:hover和:focus的逻辑移到.brand选择器内部，这样只有当鼠标悬停（或聚焦）在某一个具体的品牌图片区域时，才会触发该区域内.figure的缩放过渡效果，其他图片完全不受影响。

这样调整后，就能实现你想要的“仅选中的单个图片触发放大效果”啦！

备注：内容来源于stack exchange，提问作者Gerits Aurelien