Can I use pointer-events: none; to enable clicking on a Slider button that is underneath a transparent div in Webflow?

Yes, using pointer-events: none; on the transparent div is a valid and effective way to allow click interactions with elements beneath it in Webflow. Here's how to implement this correctly.

1. Identify the Blocking Element

• Find the transparent div that is covering the Slider button.
• Ensure this element is not needed to capture user interaction (e.g., it's purely decorative or transparent).

2. Apply pointer-events: none;

• Select the transparent div in the Webflow Designer.
• Go to the Style panel.
• Under the Custom CSS, open the Settings panel (gear icon) and add an embed element to the page or apply a custom code block in the Page Settings > Custom Code > Head or Footer.
• Add the rule: pointer-events: none; to that specific class or ID.
• Alternatively, in Webflow Designer, you can use the Custom Attributes field (under the Element Settings tab) to add:
• Name: style
• Value: pointer-events: none;

3. Confirm Positioning and Z-Index

• Check the z-index of both the transparent div and the slider.
• Ensure the slider is beneath the div in the stacking context but visibly accessible.

4. Use Conditional Pointer Control (Optional)

• If you only want to disable pointer events temporarily, you can:
• Use Webflow interactions to toggle a class on/from the transparent div that sets pointer-events: none; based on triggers (e.g. mouse hover or click).

Summary

Set pointer-events: none; on the transparent div to allow clicks to pass through to the slider button underneath. This method is fully supported in Webflow and works as a quick fix for layering conflicts involving interactive elements.