用CSS的:hover伪类配合opacity属性可实现鼠标悬停图片透明度变化，无需JavaScript；默认opacity:1，悬停设为0.6等值，并添加transition提升平滑度。

用CSS的:hover伪类配合opacity属性就能实现鼠标悬停时图片透明度变化，无需JavaScript。

基础写法：直接给img加hover效果

在CSS中选中图片元素，设置默认透明度和悬停时的透明度：

• 默认opacity: 1（完全不透明）
• 悬停时设为opacity: 0.6（半透明）或其他值（0～1之间）
• 加上transition让变化更平滑，比如transition: opacity 0.3s ease;

示例代码：

<style>
  img {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  img:hover {
    opacity: 0.6;
  }
</style>
<img src="example.jpg" alt="示例图">

进阶技巧：只对特定图片生效

避免影响页面所有图片，推荐用类名精准控制：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 给目标图片添加类，如<img class="fade-on-hover" src="...">
• CSS中写.fade-on-hover:hover { opacity: 0.7; }
• 同样建议加上transition提升体验

注意事项：透明度变化不影响布局

opacity只改变视觉透明度，不会影响图片占据的空间或触发重排（reflow）：

• 图片仍保持原有尺寸和位置，周围元素不会移动
• 如果需要“消失+收缩”效果，得配合visibility或transform等属性
• IE8及更早版本不支持opacity，但现代项目通常无需兼容

可选增强：配合缩放或边框变化

让交互更丰富，可以组合其他CSS属性：

• 悬停时轻微放大：transform: scale(1.05);
• 加个柔和边框：border: 2px solid #007bff;
• 所有动画统一用transition: all 0.3s ease;（但建议明确列出属性，避免意外过渡）