Looking for custom code to make a class not clickable or the have any hover a click state

Design help Custom code
1

Hi there!

First of all, my apologies for my poor explanation but I don’t how to describe it in another way.

Lately, I’ve been struggling with an issue on my website, I have a multi-layered hero but for this circumstance, I want to top layer with the highest z-index to be seeable but not to be clickable or to have any kind of hover a click state on this element. Because the layer beneath has a hover state but when my cursor enters the top layer it will snap to this next item and the hover state is lost.

I was wondering maybe I can add some custom code to prevent this from happening with a tag to the class of this item, but because I don’t how to describe the problem, I am not finding the right snippet of code.

Already thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Noow,

Add the following CSS to the <head> section of your page:

<style>
  .ELEMENT-CLASS {pointer-events: none;}
</style>

Change ELEMENT-CLASS to the class of the top layer.

If you want the change to show up in the Designer, then please add the code inside of a HTML Embed instead!

Hope this helps :smiley:

4 Likes
3

Thank you so much for the quick response,

The problem is partly solved, it is a text element so the cursor went from a text cursor to a regular cursor but it’s still interrupting my hover from the underlying element. I hope you know what I mean by that.

I included a read-only link

https://preview.webflow.com/preview/lucas-blank-site-8b16fd?utm_medium=preview_link&utm_source=designer&utm_content=lucas-blank-site-8b16fd&preview=228a115396003dbd5e364e9130a0df07&pageId=5ebeacb51bcc0b5f3c0ce9d5&mode=preview

4

Hmm, can you tell me what element you are talking about? Maybe a screenshot also. Sounds like you are targeting the wrong element. You should get the one that is siblings to the element with the hover interaction.