直接用CSS的opacity和transition实现：设img初始opacity为0.4，hover时为1，并加transition: opacity 0.25s ease；若含文字需结构隔离，避免文字随图片变淡。
直接用 opacity 配合 :hover 就能实现，不需要 JS，但必须加 transition，否则变化生硬；如果图片上还叠着文字或按钮，别直接改 img 的 opacity，否则文字也会变淡。
怎么用 CSS 给图片设默认透明度 + 悬停恢复
核心是控制 opacity 值：0 是全透明，1 是不透明。悬停时从低值回到 1，视觉上就是“恢复”。
- 给
<img>加一个类（比如fade-on-leave），避免污染全局样式 - 默认设
opacity: 0.4，悬停时设opacity: 1 - 必须写
transition: opacity 0.25s ease，否则切换像开关一样突兀 - 不要用
display: none或visibility: hidden替代透明度，它们不支持过渡动画
.fade-on-leave {
opacity: 0.4;
transition: opacity 0.25s ease;
}
.fade-on-leave:hover {
opacity: 1;
}为什么鼠标经过后图片没反应？常见失效原因
不是代码写错，往往是上下文干扰导致伪类没生效。
-
<a>包着<img>，但a没设display: block或宽高 ——:hover作用域太小，悬停点不到 - 父容器用了
overflow: hidden且图片有缩放/位移，实际可悬停区域被裁掉 - CSS 优先级冲突：其他规则（比如内联
style="opacity: 0.8"）覆盖了你的:hover样式 - 用了
filter: opacity()（错误写法），正确是直接用opacity属性，filter里的opacity是废弃的
图片上有文字，怎么只让图变透明、文字不变？
直接对 img 设 opacity 会连带影响子元素，这时得用结构隔离。
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="img-container">包住<img>和文字层 - 给容器设
position: relative - 文字用
position: absolute覆盖在图片上方，并确保z-index足够高 - 只对容器内的
img写:hover规则，文字层完全不受影响
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
opacity: 0.3;
transition: opacity 0.3s;
}
.img-container:hover img {
opacity: 1;
}
.img-container .caption {
position: absolute;
top: 10px;
left: 10px;
color: white;
text-shadow: 1px 1px 2px black;
opacity: 1; /* 显式锁定，防继承 */
}IE8 及更老浏览器还要兼容吗？
现在绝大多数项目已放弃支持 IE8 及以下，但如果真要保，不能只靠 opacity。
-
filter: alpha(opacity=30)是 IE 专属语法，值是 0–100，和opacity: 0.3不等价 - 必须同时写两个声明，现代浏览器忽略
filter，老 IE 忽略opacity - 注意：
filter会触发 IE 的 hasLayout，可能引发盒模型异常，慎用
.legacy-fade {
opacity: 0.3;
filter: alpha(opacity=30); /* IE8 */
}
.legacy-fade:hover {
opacity: 1;
filter: alpha(opacity=100);
}真正容易被忽略的是 transition 的 timing-function 和 duration 搭配 —— 太快（0.1s）像抽搐，太慢（0.8s）让人误以为没响应；建议从 0.25s ease-in-out 起手，再按实际动效节奏微调。
