Pointer Events

Pointer Events property allows you to make an item/element unresponsive to cursor actions. By adding this property to an item/element, you can configure it so that it doesn't respond to mouse hover, clicks, or taps on a touchscreen.

Add an option: Design panel/tab → Appearance section → click the "+" on the right of the Pointer Events parameter.

You can choose from the following parameters:

• None — the element does not respond to the pointer and allows pointer actions (e.g., clicks) to pass through to the underlying layers.
• Auto — the element responds to the pointer (default value).

How to use Pointer Events property in practice?

Case: We have a semi-transparent overlay that covers the entire screen, but the user needs to be able to click on the elements underneath it.

Real example of use: When hovering over a block, the entire screen should be darkened except for that block.

Without hovering:

With hovering:

How does the Pointer Event property help here? To understand, let's look at the layout implementation for this task. Steps:

  1. Create the overlay for dimming: add a Div-Block with a dark background and a height of 100vh, set its position to absolute and opacity to 0%.
  2. Add an animation to the overlay so that it becomes visible when hovering over the block. Animation "On Hover", trigger — the block where the cursor will hover, effect — opacity from 0 to 90% (the value you need).
  3. Set Z-index: for the overlay — 1, for the hover area — 2, this is necessary so that the hover area is displayed above the overlay.

Done: When hovering the cursor over the block, the dimming appears. When the cursor is removed, the dimming also disappears.

The problem that arises with this implementation is the inaccessibility of other buttons on the page. By default, the overlay is visually invisible, but it covers all other elements on the site because it occupies the full screen height and is positioned absolutely. As a result, all buttons simply do not work — the cursor cannot reach them.

The buttons in the menu cannot be clicked.

The problem can be solved with Pointer Events property:

You need to add Pointer Events property with the value "None" to the overlay — and it will stop being interactive for the cursor, while still being visually displayed on the website.

Thus, the overlay will pass pointer events to the buttons underneath it, and the user will be able to click on them.

The buttons are accessible, and they can be clicked.