[prototyping] Interaction under overlaying layers

Forum|Forum|3 years ago
January 10, 2023
1 reply
381 views

Hello,

Can i disable somehow clickable components when some other layer (for example fixed element) is covering it?

Thanks for answer!

This topic has been closed for replies.

AkinGn

Community Expert

Hi @Tomasz27730116i5wl , I had discovered a workaround for that actually a while ago, and that's making the top element a component with a hover state (you don't need to define any changes for its hover, just create a hover state for top component) you can see a sample prototype here: https://xd.adobe.com/view/2b274b24-5a2e-4fc7-a9c0-644d392b8a57-7e74/ and the file here: https://www.dropbox.com/s/h8krm64kepc5lw6/interaction-under-overlaying-layers.xd?dl=0

As you see I made the header fixed and only the buttons scrollable (don't forget to select top element's default state again, after creating its hover state or you can't see it works) and since I made the header transparent a little, you can see underlying buttons' hover state don't work. Hope this helps!

T

Tomasz27730116i5wlAuthor

Participant

@AkinGn thanks for the example but unfortunetly it doesn't worked in my case.
I'm not sure but i think it's because it's much more complex then yours. Sorry i cannot unfortunetly share it with you cause i've got agreement signed with this.

I can just describe to you what i've done:
In my case there is a complex header component (fixed to top just like yours) but there is also menu inside it and lot of other functionalities - so when i add hover to it - other functionalities doesn't work.

So i tried to put another element right below header with hover effect - but unfortunetly it doesn't worked either.
I understand why it should work - cause it should probably hover that element instead of creating click underneath - so we've got action assigned over it.

AkinGn

Community Expert

Hmm I see, in that case I might think of at least limiting the "bottom hover" behaviour, by creating hover for the top element as much as I can with some masks, little rectangles etc, at least you'd limit the bottom hovers that way.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.