Highlighted

Hover state within a component not working when opacity is set below 1%

Community Beginner ,
Jul 18, 2020

Copy link to clipboard

Copied

I have a component that has 2 states:

  • Default state: A Group containing a rectangle with text, and another rectangle + text within (which is itself a component with a hover state). At Default State, opacity is set to 0%
  • Second State: Same thing, but the opacity is set to 100%

 

In prototyping, when the second state is triggered, the hover state on the component within the first component no longer works.

 

When default state's opacity is set to 100%, it works fine in both states. The same thing happens when "Hide" is used in the Layers panel, rather than opacity.

 

In troubleshooting, when the opacity is set to 1% or higher, the hover works again

 

I have attached two videos showing this bug - in one marked 0% opacity, you can see that the hover button does not work. In the other, opacity is set to 22%, and the hover button then works in both states. No other changes were made. (this is troubleshooting so placement is not relevant)

TOPICS
Product performance, Prototyping

Views

209

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Hover state within a component not working when opacity is set below 1%

Community Beginner ,
Jul 18, 2020

Copy link to clipboard

Copied

I have a component that has 2 states:

  • Default state: A Group containing a rectangle with text, and another rectangle + text within (which is itself a component with a hover state). At Default State, opacity is set to 0%
  • Second State: Same thing, but the opacity is set to 100%

 

In prototyping, when the second state is triggered, the hover state on the component within the first component no longer works.

 

When default state's opacity is set to 100%, it works fine in both states. The same thing happens when "Hide" is used in the Layers panel, rather than opacity.

 

In troubleshooting, when the opacity is set to 1% or higher, the hover works again

 

I have attached two videos showing this bug - in one marked 0% opacity, you can see that the hover button does not work. In the other, opacity is set to 22%, and the hover button then works in both states. No other changes were made. (this is troubleshooting so placement is not relevant)

TOPICS
Product performance, Prototyping

Views

210

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 18, 2020 0
Adobe Employee ,
Jul 20, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. If I understood the workflow correctly, it requires nested hovers and I am afraid to say that nested hovers are still not available in Adobe XD. I'd request you to please upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38968075-hover-ins...

 

If that's not the case, I'd request you to share a small video capturing both the components default state and hover state properties with complete workflow, we'll try our best to help you with it.

 

Regards

Rishabh

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2020 0
Community Beginner ,
Jul 23, 2020

Copy link to clipboard

Copied

This isn't a hover within a hover. It's a hover within a component with 2 regular states. 

The problem occurs when the state contains an element that is 0% capacity in default state. At 1% or higher, it works fine.


The videos are attached to my original post

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2020 0
Adobe Employee ,
Aug 03, 2020

Copy link to clipboard

Copied

Sorry for the confusion, we can surely test this on our end, so will it be possible for you to share a sample file so that can test this on our end? You can add the file to shared storage and share the link either here or in the DM by clicking on my name. 

 

Note: While sending a DM, please add this discussion link in the subject.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2020 0