鼠标悬停.img-box时仅使图片变暗而图标保持原样的CSS实现问题

嘿，你的问题出在给父容器 .img-box 直接加了 filter —— 这个滤镜会作用于容器里的所有子元素，包括那个播放图标，所以才会导致图标也跟着变暗。下面是具体的修正方案：

核心思路 #

把 filter: brightness(30%) 单独应用到 <img> 元素上，而不是整个容器，这样就只会影响图片，播放图标完全不受滤镜影响。同时保留你原来需要的过渡效果和图标颜色变化。

修正后的CSS代码 #

/* 给容器设置基础样式，确保过渡效果正常 */
.img-box {
  position: relative; /* 如果播放图标是叠加在图片上的，需要这个做绝对定位的参考 */
  transition: color 0.3s; /* 保留图标颜色的过渡动画 */
}

/* 仅在容器悬停时，给图片应用滤镜 */
.img-box:hover img {
  filter: brightness(30%);
  transition: filter 0.3s ease; /* 图片变暗的过渡动画 */
}

/* 可选：如果播放图标是叠加在图片上的，加上定位让它居中显示 */
.img-box .ion-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* 初始白色，悬停时改色可在.img-box:hover里设置 */
  z-index: 10; /* 确保图标在图片上方 */
  font-size: 2rem; /* 根据需求调整大小 */
}

对应的HTML结构 #

<div class="img-box">
  <i class="ion-play"></i>
  <img src="resources/images/john.jpg" alt="">
</div>

为什么这个方案可行？ #

• 父容器的 filter 会影响所有子元素，而单独给 <img> 加滤镜只会作用于图片本身，图标完全不受影响。
• 图标颜色的过渡效果依然保留在父容器的 transition 里，悬停时可以正常改变颜色（比如你原来写的 color: #fff）。
• 如果你的图标是叠加在图片上的，通过 position: absolute 和 z-index 可以确保它始终显示在图片上方，不会被滤镜干扰。

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