不能直接对用:hover变色，因其是替换元素，safari ios等浏览器支持差，且background-color/color无效；应包裹容器用:hover控制filter或伪元素实现效果。

直接在 <img> 上写 :hover 变色不可靠，尤其在移动端和 Safari iOS 上大概率失效；必须用容器包裹，再通过伪类控制内部图片或伪元素。

为什么不能直接对 <img> 用 :hover 变色

<img> 是替换元素，浏览器对其 :hover 支持不一致：Safari iOS 首次点击后才触发，旧版 Chrome Android 可能完全不响应；更隐蔽的问题是，直接改 background-color 或 color 对 <img> 无效（它没文本内容、无背景），所谓“变色”实际得靠 filter 或覆盖层实现。

• 想让图片“变暗”，别试 img:hover { background: #000 } —— 它不会生效
• 想让图片“变灰”，得用 filter: grayscale(1)，且必须作用在 <img> 自身，但前提是 hover 规则能正确触发
• 最稳妥的路径：用 <div class="img-hover"> 包住 <code><img>，把 :hover 写在容器上

  filter 悬停变色的最小可用写法

  用 filter 实现“变色感”（如提亮、去色、加色调）比改背景更合理，但必须配好硬件加速和过渡声明，否则在 Retina 屏模糊、动画卡顿。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 容器需设 display: inline-block 或 block，否则 :hover 不触发
  • <img> 要加 display: block 消除底部空白，再加 will-change: filter 强制走合成层
  • transition 必须写在常态规则里，比如 .img-hover img { transition: filter 0.25s ease; }
  • 常用组合：filter: brightness(1.15) saturate(1.2) contrast(1.05)，避免用 blur() 做主效果（低端机掉帧）

  .img-hover {
    display: inline-block;
    overflow: hidden;
  }
  .img-hover img {
    display: block;
    transition: filter 0.25s ease;
    will-change: filter;
  }
  .img-hover:hover img {
    filter: brightness(1.15) grayscale(0.3);
  }

  用伪元素叠加实现“变色遮罩+文字”

  如果目标是“鼠标一悬停，图片变半透明、浮出标题”，别用两个 <img> 切换或 JS 改 src —— 这破坏懒加载、干扰 SEO，且可能闪屏。

  • 用 ::before 做遮罩层：background: rgba(0,0,0,0.6) + opacity 过渡
  • 用 ::after 显示文字，content: "标题"，位置绝对定位
  • 容器必须设 position: relative，否则伪元素会脱标定位到 body
  • 所有文字和遮罩样式都写在伪元素上，不碰原图的 alt 和加载逻辑

  .img-hover {
    position: relative;
    display: inline-block;
  }
  .img-hover::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.25s;
  }
  .img-hover:hover::before {
    opacity: 1;
  }
  .img-hover::after {
    content: "这是标题";
    position: absolute;
    bottom: 12px; left: 12px;
    color: white;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.25s;
  }
  .img-hover:hover::after {
    opacity: 1;
  }

  真正难的不是写几行 CSS，而是判断该用 filter 还是伪元素——前者适合整体色调微调，后者适合信息叠加；还有容易被忽略的一点：所有悬停效果在 iOS 上首次交互都依赖点击激活，所以别把它当核心功能依赖。