使用 css 实现鼠标悬停图片变亮
问题：
如何在保持图片可点击的情况下，实现鼠标悬停显示半透明白色背景的效果？
答案：
方法 1：使用 opacity 属性
最简单的方法是使用 :hover 选择器修改图片的 opacity 属性：
.image:hover {
opacity: 0.7;
}方法 2：使用伪类（推荐）
如问题中所述，可以在图片上添加一个 :before 伪类，实现悬停显示半透明白色背景的效果。但为了确保鼠标能够点击穿透伪类遮罩层，需要将伪类的 pointer-events css 属性设置为 none：
.image:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
transition: all .5s;
pointer-events: none;
}
.image:hover:before {
background-color: rgba(255, 255, 255, 0.7);
}以上就是如何使鼠标悬停图片变亮，且保持图片可点击？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
306
收藏
