Skip to main content
Tomasz27730116i5wl
Participant
Jan 10, 2023 11:25 AM UTC
Question

[prototyping] Interaction under overlaying layers

Hello,

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

Thanks for answer!

    This topic is closed to new replies. Start a new post to keep the conversation going.

    3 replies

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    Jan 10, 2023 11:44 AM UTC

    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!

    Translate
      Tomasz27730116i5wlAuthor
      Participant
      Jan 11, 2023 8:42 AM UTC

      @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.

      Translate
      AkinGn
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      Jan 11, 2023 11:32 AM UTC

      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. 

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices