Making buttons accessible in fixed/absolute/relative divs

Design help General
1

I’ve been trying for days to figure out if it’s possible to have link blocks (ie. buttons) on different 100vh divs be ‘clickable’. At the moment the upper most z-index div blocks the divs and buttons underneath.

At the moment (depending on the div z-index) only the button on the higher z-index div can be clicked.

I’ve tried and failed using show/hide to disable divs of a higher index so divs underneath (and their ‘button’) can be accessed. Maybe this isn’t possible, or maybe I’m setting it up wrong?

Maybe what I’m trying is impossible?

Any help would be greatly appreciated.
Here’s my read only:
https://preview.webflow.com/preview/fitzs-protoype?utm_medium=preview_link&utm_source=designer&utm_content=fitzs-protoype&preview=48e34f3808facf925db00be01022278c&mode=preview

The divs in question are:
Mirrorball BG Section
& Mural BG Section

Many thanks

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

2

you can try to do a “hover” z-index transform of the button that you need

3

Thanks very much for the reply.

Unfortunately the buttons in my div are designed to occupy the same position (on the page) from one div to the next so not sure i can use hover states (although the idea itself is great).

I was sure I’d be able to set each div to show/hide on scroll, to essentially deactivate them and give way for the next div in order of z-index, ‘underneath’. But that’s not working either.

I’m really stumped.