不能直接对<img>用: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">包住<img>，把:hover写在容器上
filter 悬停变色的最小可用写法
用 filter 实现“变色感”（如提亮、去色、加色调）比改背景更合理，但必须配好硬件加速和过渡声明，否则在 Retina 屏模糊、动画卡顿。
- 容器需设
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 上首次交互都依赖点击激活，所以别把它当核心功能依赖。
