Skip to main content
T
Tomasz27730116i5wl
Participant
January 10, 2023
Question

[prototyping] Interaction under overlaying layers

  • January 10, 2023
  • 1 reply
  • 380 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.

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    January 10, 2023

    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
      January 11, 2023

      @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
      AkinGnCommunity Expert
      Community Expert
      January 11, 2023

      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. 

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