How to make an element "click-through"?

Hatch WIP Discussion
1

Hello!

I noticed a lot of the people coming to my Hatch site did not realize the moving cards are clickable, so I have just added a few moving cursor gifs on top to hint users into clicking. Thing is now the gifs are in the way, and if you click on them you are not taken to the link.

I know an easy fix would be to put the same link on the gif, but is there a small piece of code that I can insert on the gifs to make them “click-through”? There’s gotta be an easy way to fix this.

Captura de pantalla 2024-02-09 120155
Captura de pantalla 2024-02-09 1201551130×581 326 KB

Thanks so much

2

Hi OniricCat,

What you want to do is set a CSS style property called ‘pointer–events’ to ‘none’.

We don’t expose this option, but you can set it using a JavaScript Interaction (Hatch’s term for custom javascript)

To do this:

  1. select the element you want to ignore clicks so the thing beneath it can be clicked.
  2. click the { } curly brackets to create a JavaScript Interaction.
  3. enter the following:

this.style.pointerEvents = ‘none’

jsInteractions
settingStyle

1 Like
3

Yes! That worked like a charm. Thanks a lot @anthony1 :heart_hands:

1 Like