css 鼠标穿透

作者：以往的帅哥发布日期:2025-12-03 浏览:71

/* css 鼠标穿透 */

/* 通过设置 pointer-events 属性为 none，可以让元素不响应鼠标事件，从而实现鼠标穿透效果 */
.mouse-through {
    pointer-events: none;
}

/* 如果需要让子元素仍然可以响应鼠标事件，可以单独设置子元素的 pointer-events 为 auto */
.mouse-through .child-element {
    pointer-events: auto;
}

解释说明：

pointer-events: none;：使元素不响应任何鼠标事件（例如点击、悬停等），鼠标会“穿透”该元素，直接作用于其下方的元素。
.mouse-through .child-element { pointer-events: auto; }：如果父元素设置了 pointer-events: none;，但希望其子元素仍然可以响应鼠标事件，则可以在子元素上显式设置 pointer-events: auto;。

上一篇：css 自定义滚动条

下一篇：css style用法