Streaming live at 10am (PST)

Elements underneath modal are showing

Hey!

I’ve created a modal that pops up when hovering over a text. Problem is, when the modal is showing, that text (that should be underneath the modal) is showing on top of the modal box. All Z values seem to be correct, modal Z value is higher than the text that triggers the modal to open on hover. Also - the hover out doesn’t work. Any idea why this happens?

Link to project: https://preview.webflow.com/preview/egenlokal?utm_medium=preview_link&utm_source=designer&utm_content=egenlokal&preview=24589ab4b2fa79517872f84ee28cc65f&mode=preview

Thanks!
Sonja


Here is my public share link: LINK
(how to access public share link)

That’s a start, but z-index doesn’t only work like this. It works with Stacking Contexts. Try to see if this helps, and please come back to tell me. http://z-index.webflow.io/

As there are elements over your modal, they probably also prevent the hover-out even to be triggered on the modal. Fixing the first issue will probably fix this one too.

Thank you so much for the Z-value link - saved me days by understanding this concept. First issue is solved.

The hover out issue still remains, the popup is now a child element of the modal trigger, and even though its Z-value is higher than the parent, it shouldn’t cover the parent, preventing the hover out right?

Great.

Try to use custom code to make any element that could be in the way “transparent”, I mean click-through.

Add this code in a Embed block right inside of the page.

<style>
.clickthrough {pointer-events: none}
</style>

And then add the clickthrough combo class to any element that could block the hover (not on the trigger element of course).

Thanks, I tried this, but it doesn’t seem to do the job

Is there maybe another code snippet I should use?

Best,
Sonja

Hello again, when I add this code snippet the hover box doesn’t open at all.