如何使鼠标悬停图片变亮，且保持图片可点击？

使用 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);}

登录后复制

以上就是如何使鼠标悬停图片变亮，且保持图片可点击？的详细内容，更多请关注【创想鸟】其它相关文章！