Skip to main content
responsiva
Participant
September 15, 2022
Answered

Active point below a graphic element

  • September 15, 2022
  • 1 reply
  • 177 views

If I have an active element under an inactive graphic element, in the preview the underlying active element remains active instead of not being clickable even partially.

This topic has been closed for replies.
Correct answer AkinGn

Hi @responsiva, I tried and yes that's true. Let me explain with an example: I created a button with a hover state, I placed a semi transparent rectangle over it with 90% opacity (which is a static/inactive element as you said) when I hover over the rectangle, even though it's above the button, I can see the button's hover color change still occurs. Then I come up with a workaround like this: I made the static/inactive element a component and added it a hover state (don't forget to go back to its default state while viewing the prototype) without doing any other changes, the button stays as it is like it should behave.

You can see the prototype here: https://xd.adobe.com/view/d44e36ff-70ec-4eef-ac13-fce081bd2dfc-811d/?hints=off

And the file here: https://www.dropbox.com/s/hzhktvn7uynjzos/hovering-button-below.xd?dl=0

 

Hope this helps!

1 reply

AkinGn
Community Expert
AkinGnCommunity ExpertCorrect answer
Community Expert
September 15, 2022

Hi @responsiva, I tried and yes that's true. Let me explain with an example: I created a button with a hover state, I placed a semi transparent rectangle over it with 90% opacity (which is a static/inactive element as you said) when I hover over the rectangle, even though it's above the button, I can see the button's hover color change still occurs. Then I come up with a workaround like this: I made the static/inactive element a component and added it a hover state (don't forget to go back to its default state while viewing the prototype) without doing any other changes, the button stays as it is like it should behave.

You can see the prototype here: https://xd.adobe.com/view/d44e36ff-70ec-4eef-ac13-fce081bd2dfc-811d/?hints=off

And the file here: https://www.dropbox.com/s/hzhktvn7uynjzos/hovering-button-below.xd?dl=0

 

Hope this helps!