纯CSS实现图片悬停透明效果：设img初始opacity为1，hover时设为0.6，配合transition: opacity 0.3s ease；失效常见原因包括overflow:hidden裁剪、元素遮挡、优先级不足或pointer-events:none。
用 CSS :hover 配合 opacity 最直接
不需要 JavaScript，纯 CSS 就能实现。关键在于给图片加一个 :hover 伪类，并修改它的 opacity 值。浏览器原生支持，兼容性好（IE9+），性能也高。
-
opacity取值范围是0（完全透明）到1（完全不透明），常用悬停值如0.7或0.6 - 必须为图片设置初始
opacity（比如1），否则悬停前后无变化 - 记得加
transition，否则透明度切换会突兀；推荐写成transition: opacity 0.3s ease;
img {
opacity: 1;
transition: opacity 0.3s ease;
}
img:hover {
opacity: 0.6;
}
为什么有时悬停没反应？检查这几个点
常见失效不是写法错，而是被其他样式或结构干扰了：
- 父容器设置了
overflow: hidden且图片尺寸溢出，导致:hover区域实际不可触达 - 图片被其他元素（比如空
<div>或绝对定位遮罩）盖住，鼠标根本没 hover 到<img>上 - CSS 选择器优先级不够，被更具体的规则覆盖（例如
.gallery img被#main .item img覆盖） - 用了
pointer-events: none在图片或其祖先上（包括某些 UI 框架默认行为）
想只改图片内容不改背景？别用 opacity
opacity 会让整个元素（含子元素、边框、文字）一起变透明。如果图片是 <figure> 里带标题的，标题也会跟着变淡——这通常不是想要的效果。
- 此时应改用
filter: opacity()，它只影响渲染，不影响层叠上下文和事件穿透 - 但注意：
filter在旧版 Safari（<img> 支持不稳定，iOS 12 及更早可能失效 - 更稳妥的替代是：用伪元素覆盖 +
background-image，把图片作为容器背景，再控制伪元素透明度
移动端 touch 设备上的小坑
iOS Safari 和部分 Android 浏览器默认不触发 :hover，除非用户真“悬停”（极少发生）。结果就是：手指点一下，没反应；再点一下，才激活 hover 状态（有些机型甚至要长按）。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：加
@media (hover: hover)媒体查询，只在支持悬停的设备上启用该效果 - 更务实的做法：别依赖
:hover做核心交互，把它当增强体验用；主功能仍靠点击或 tap 触发 - 如果必须响应 tap，可用 JavaScript 监听
touchstart并临时加 class，但要注意避免 click 延迟和重复触发
opacity + :hover 看似简单，真正上线前得在真机上试 touch 行为，还要确认父层没意外截断 pointer events。 
