Make covered elements clickable with pointer events
Designs with overlapping elements or hover animations can sometimes trigger unintended mouse interactions and contribute to a poor experience for your site visitors. With Webflow pointer events, you can disable click or touch interactions on an element to ensure that visual-only elements don’t interrupt interactions with other elements.
00:00 Introduction 00:04 Set pointer events to "None" on an image 00:31 Pointer events in the Navigator 00:41 Previewing the button
Video transcript
Pointer events in CSS control whether an element can receive mouse events — clicks, hovers, and other pointer interactions. The pointer-events property is particularly useful when you have overlapping elements and need to control which one is interactive.
The most common use case in Webflow is making a covered element clickable even when another element is visually layered on top of it. By default, if element B is positioned over element A, element B will capture all mouse events and element A won't be clickable. Setting pointer-events: none on element B tells the browser to ignore it for mouse interactions, passing events through to element A beneath it.
In Webflow, you can set pointer events through custom CSS. Select the element you want to make pass-through, add a class, and in the Style panel's Custom CSS field (or via a Code Embed or Site Settings custom code), set pointer-events: none for that class.
This technique is commonly used for decorative overlay elements, animated backgrounds, or any element that should be visible but not intercept clicks intended for elements beneath it.
