巧妙运用CSS实现鼠标悬停图片高亮，同时保持图片可点击性！本文将深入探讨如何优雅地实现这一效果，并解决遮罩层可能导致的点击失效问题。
许多网页设计中都需要鼠标悬停图片高亮的功能，以增强用户互动体验。然而，如果图片关联了例如图片查看器等JavaScript插件，直接使用遮罩层可能会导致点击事件失效。本文提供两种方案，助您轻松解决此问题。
方案一：直接调整图片透明度
此方法最为简洁直接，利用CSS的:hover选择器和opacity属性，通过改变图片透明度来实现高亮效果。无需额外元素，代码精简，且不会影响图片的可点击性。但前提是图片容器背景色需为白色或与高亮后的图片颜色协调，否则效果可能不佳。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.item > .image img:hover {
opacity: 0.7; /* 可调整数值控制亮度 */
}
关键在于直接作用于img元素，而非父元素.image，确保:hover事件直接作用于图片，不影响点击事件。
方案二：使用pointer-events: none属性
如果您偏好使用::before伪类创建遮罩层，则需设置遮罩层的pointer-events属性为none。这将使遮罩层对鼠标事件透明，鼠标事件可直接穿透到下层图片元素。
结合示例代码，修改后的CSS如下：
.item > .image:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: all .5s;
pointer-events: none; /* 关键：使遮罩层忽略鼠标事件 */
}
.item > .image:hover:before {
background-color: rgba(var(--rxc-light-rgb), .3);
}
通过pointer-events: none，鼠标可直接点击下层图片，触发图片查看器viewer.js的事件。
两种方案都能有效解决问题，您可以根据实际情况选择最合适的方案。
