如何通过CSS实现非聚焦图片显示灰度、无hover时无灰度的效果

这个需求完全可以用纯CSS实现，不需要额外编写JavaScript，核心是利用父容器hover状态和子元素选择器的组合逻辑就能实现。

实现思路 #

• 给两张图片套同一个父容器包裹
• 父容器被hover时（即任意一张子图片被hover），默认给所有子图片添加灰度效果
• 单独给当前正被hover的图片重置灰度为0，同时保留你已经写好的放大、对应文字显示的原有逻辑即可

该逻辑刚好匹配你的需求：父容器未被hover时（两张图都没被hover），所有图片都没有灰度；父容器被hover时，所有图片默认变灰，唯独当前被hover的图片取消灰度，等效于未被hover的另一张图片自动变为灰度。

示例代码 #

你可以参考下面的结构和样式，对应修改自己的原有代码：

<!-- 外层父容器 -->
<div class="img-group">
  <div class="img-item">
    <img src="你的图片1地址" alt="图1">
    <p class="img-text">对应文字1</p>
  </div>
  <div class="img-item">
    <img src="你的图片2地址" alt="图2">
    <p class="img-text">对应文字2</p>
  </div>
</div>

/* 基础样式可以保留你自己的原有写法，重点参考hover相关的逻辑部分 */
.img-group {
  display: flex;
  gap: 20px;
}
.img-item {
  position: relative;
}
.img-item img {
  width: 200px;
  transition: all 0.3s ease; /* 可以自行调整过渡动画时长 */
}
.img-text {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}

/* 核心实现逻辑 */
/* 父容器hover时所有图片默认变灰度 */
.img-group:hover .img-item img {
  filter: grayscale(100%);
}
/* 当前hover的图片取消灰度，同时应用放大效果、显示文字 */
.img-group .img-item:hover img {
  filter: grayscale(0);
  transform: scale(1.1); /* 放大比例可以自行调整 */
}
.img-group .img-item:hover .img-text {
  display: block;
}

注意事项 #

• 如果你的两张图片是直接平级摆放，没有外层item容器，也可以直接把选择器替换成对应img的类名，逻辑是通用的
• 建议给图片添加transition属性，灰度切换和放大的效果会更流畅自然

内容的提问来源于stack exchange，提问作者Jurgen