Skip to main content
responsiva
Participant
Sep 15, 2022 9:29 AM UTC
Answered

Active point below a graphic element

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 is closed to new replies. Start a new post to keep the conversation going.
AkinGn
AkinGnCorrect answer
Community Expert
Sep 15, 2022 12:25 PM UTC

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
Sep 15, 2022 12:25 PM UTC

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!

Translate