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

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

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