Highlighted

How to use Multiple Hover States within a component in Adobe XD?

Community Beginner ,
Nov 09, 2019

Copy link to clipboard

Copied

Question

How would it be feasible to add multiple hover states within a component element?

 

Actual

Secondary hover state seems not working / triggerred while the first hover state is active.

 

Expected

Secondary hover state is enabled when a parent component has multiple child comporntant with hover state on each one of them.

 

Scenario

Global Navigation menu in general sometimes has its multiple hover states: First, a main menu item is hoverred; second, each subordinating menu item is hoverred.

 

Reference

Following is a referential mockup and collection of ideas with visual aids.

https://xd.adobe.com/view/1752e6ec-4c62-4f01-7177-69c759e34f85-6163/

 

Thanks,

TMK

 

<The title was renamed by moderator>

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

I took a close look at the failing or at least flawed technology here.

It seems that the Hover States can't have their sensitive areas work independently when they're overlapping each other. As soon as one Component's hover is active (even when it's partially beneath an other Hover element), its sensitive bounding box (rectangular, no matter how irregular the visible shape appears) blocks all other Hover interactions.

However, a linked element does respond by showing the browse hand and works as expected, even – and that's the strangest thing – when it's partially or even completely beneath a Hover element !

https://xd.adobe.com/view/375a5843-c451-4f05-6200-cf13e2f0d1a1-416b/

 

This definitely needs some head-scratching and rethinking...

TOPICS
How to, Missing feature

Views

1.9K

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

How to use Multiple Hover States within a component in Adobe XD?

Community Beginner ,
Nov 09, 2019

Copy link to clipboard

Copied

Question

How would it be feasible to add multiple hover states within a component element?

 

Actual

Secondary hover state seems not working / triggerred while the first hover state is active.

 

Expected

Secondary hover state is enabled when a parent component has multiple child comporntant with hover state on each one of them.

 

Scenario

Global Navigation menu in general sometimes has its multiple hover states: First, a main menu item is hoverred; second, each subordinating menu item is hoverred.

 

Reference

Following is a referential mockup and collection of ideas with visual aids.

https://xd.adobe.com/view/1752e6ec-4c62-4f01-7177-69c759e34f85-6163/

 

Thanks,

TMK

 

<The title was renamed by moderator>

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

I took a close look at the failing or at least flawed technology here.

It seems that the Hover States can't have their sensitive areas work independently when they're overlapping each other. As soon as one Component's hover is active (even when it's partially beneath an other Hover element), its sensitive bounding box (rectangular, no matter how irregular the visible shape appears) blocks all other Hover interactions.

However, a linked element does respond by showing the browse hand and works as expected, even – and that's the strangest thing – when it's partially or even completely beneath a Hover element !

https://xd.adobe.com/view/375a5843-c451-4f05-6200-cf13e2f0d1a1-416b/

 

This definitely needs some head-scratching and rethinking...

TOPICS
How to, Missing feature

Views

1.9K

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
Nov 09, 2019 6
Adobe Community Professional ,
Nov 10, 2019

Copy link to clipboard

Copied

I agree, it definitely looks like the compontents are there for a multi-hover function.

The fact that you can set multiple Interactions to the hove state, should allow your menu concept to work.

Perhaps this is something the XD team needs to look into a little further.

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...
Nov 10, 2019 5
Adobe Employee ,
Nov 11, 2019

Copy link to clipboard

Copied

Hi there,

 

Thank you for the detailed description and feedback. We really appreciate your time in giving us feedback. We will make sure to share your feeback with the team so that they can look into your suggestions and make improvements in the future.

 

Thanks,

Harshika

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...
Nov 11, 2019 3
New Here ,
Mar 13, 2020

Copy link to clipboard

Copied

I would like to have a hover state inside of another hover state. On adobexd.uservoice.com There are 46 votes for this under "Hover inside hover (nested hovers)" in the feature request section. It seems like something that any UX designer would want to do.

Uservoice request:

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38968075-hover-ins...

Video:

https://www.youtube.com/watch?v=_E2uM4u51hg&feature=youtu.be

Adobe Xd Bug https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38968075-hover-inside-hover-nested-hovers

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...
Mar 13, 2020 1
Adobe Community Professional ,
Mar 13, 2020

Copy link to clipboard

Copied

I took a close look at the failing or at least flawed technology here.

It seems that the Hover States can't have their sensitive areas work independently when they're overlapping each other. As soon as one Component's hover is active (even when it's partially beneath an other Hover element), its sensitive bounding box (rectangular, no matter how irregular the visible shape appears) blocks all other Hover interactions.

However, a linked element does respond by showing the browse hand and works as expected, even – and that's the strangest thing – when it's partially or even completely beneath a Hover element !

https://xd.adobe.com/view/375a5843-c451-4f05-6200-cf13e2f0d1a1-416b/

 

This definitely needs some head-scratching and rethinking...

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...
Mar 13, 2020 0
Eric5C0B LATEST
Community Beginner ,
Oct 16, 2020

Copy link to clipboard

Copied

Hi. Everyone here is right, and wrong. Nested components with hover feature work just fine *in the shared link* They just dont appear to work in the XD Preview. https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/ 

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...
Oct 16, 2020 1