概念与目标
1. 目标与用户体验
在网页图片展示中，鼠标悬停变亮能够快速给用户反馈，提升交互的直观性。实现时需要确保点击行为不受干扰，也就是说用户在点击图片或链接时不会因为光效而发生误触或无法跳转的情况。
此外，可访问性和性能表现也是设计要点。应避免过强的视觉干扰、保证屏幕阅读器可访问、并让动画在低端设备上也保持流畅。
2. 方案对比：直接应用滤镜 vs 伪元素覆盖
直接在图片上应用 CSS filter 实现亮度提升，语义简单且易于维护，但在大量图片并发渲染时可能带来显式的 GPU 负载，需要评估性能影响。
通过伪元素覆盖实现亮度效果，可以把亮度交给层叠效果处理，避免拦截点击，并且便于扩展成更丰富的视觉反馈。需要注意确保伪元素的指针事件设置为 none，让点击事件传递到底层的图片或链接。
/* 方案1：直接对图片应用悬停亮度 */
a.image-link img {transition: filter 0.25s ease;
}
a.image-link:hover img {filter: brightness(1.25);
}/* 方案2：伪元素覆盖＋亮度提升（不拦截点击） */
a.image-link {position: relative;display: inline-block;
}
a.image-link img {display: block;transition: filter 0.25s ease;
}
a.image-link::after {content: '';position: absolute;inset: 0;background: rgba(255,255,255,0);pointer-events: none; /* 确保点击穿透到底层链接 */transition: background 0.25s ease;
}
a.image-link:hover::after {background: rgba(255,255,255,0.25);
}
a.image-link:hover img {filter: brightness(1.25);
}
实现方法与示例
1. 直接对图片应用悬停亮度
如果图片直接作为链接的一部分，直接在图片上应用悬停亮度的做法最简单，也最易于理解。为了确保过渡平滑，可以为图片设置 transition，并在悬停时调整 brightness。
请确保图片所在的结构清晰，选择器尽量具体，以避免影响到其它页面元素的悬停行为。对于键盘导航，仍然可以通过聚焦对焦点的处理来保持一致性。
/* 直接对图片应用悬停亮度的示例 */
a.image-link img {transition: filter 0.25s ease;
}
a.image-link:hover img {filter: brightness(1.25);
}
2. 通过伪元素实现无干扰点击的亮度效果
在需要更复杂的交互或希望把亮度逻辑从图片本体分离时，可以使用伪元素覆盖来实现亮度反馈，同时确保点击不会被覆盖层拦截。伪元素设置为 pointer-events: none，从而让点击直接落在图片或链接上。
这种做法的优点是可以更灵活地叠加其它视觉效果，例如半透明遮罩、渐变和混合模式，同时保留原有的交互行为。
/* 伪元素方案的实现要点 */
a.image-link {position: relative;display: inline-block;
}
a.image-link img {display: block;transition: filter 0.25s ease;
}
a.image-link::after {content: '';position: absolute;inset: 0;background: rgba(255,255,255,0);pointer-events: none;transition: background 0.25s ease;
}
a.image-link:hover::after {background: rgba(255,255,255,0.25);
}
a.image-link:hover img {filter: brightness(1.25);
}
/* 键盘导航与无障碍的辅助处理 */
a.image-link:focus-visible img {filter: brightness(1.25);
}
/* 首选减少动画时的兼容性处理 */
@media (prefers-reduced-motion: reduce) {a.image-link img,a.image-link:hover img {transition: none;filter: none;}
}
