Highlighted

Nested Hovers

New Here ,
Feb 08, 2020

Copy link to clipboard

Copied

  Hi everyone I'm new here and while not exactly being a pro in xd, I've been trynna think my way out of a problem I've been facing in xd lately, I've checked all around the internet and tried every trick I can think of but I still can't solve it, I hope sharing it here would bring a solution. (P.S - Maybe all my use of xd terms might not be totally correct 😅

     So I'm trying to create a list of cards that have a pop out hover effect when I click them. It works great, b no ut where the problem is I want to add a button with a separate hover effect within the cards. Sort of a hover button within a hover panel, a nested hover. When I do that, the card pops out alright but the button in it with its own hover effect won't hover when I place the mouse cursor over it, It just sits there plain and unresponsive, not unless I sort of quickly jump the mouse cursor from outside the card directly to the button, and that only works sometimes.

     I dunno if this isn't a feature yet or I'm just doing something wrong. Any ideas??? Anyone??? 

Correct answer by Eric5C0B | Community Beginner

Hi. This is easy to do. Just create the components are you usually would and then nest them. It ont work in the XD preview, but it will work in the prototype link. https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/

Eric Forest

TOPICS
How to, Missing feature, Product performance, Prototyping

Views

535

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

Nested Hovers

New Here ,
Feb 08, 2020

Copy link to clipboard

Copied

  Hi everyone I'm new here and while not exactly being a pro in xd, I've been trynna think my way out of a problem I've been facing in xd lately, I've checked all around the internet and tried every trick I can think of but I still can't solve it, I hope sharing it here would bring a solution. (P.S - Maybe all my use of xd terms might not be totally correct 😅

     So I'm trying to create a list of cards that have a pop out hover effect when I click them. It works great, b no ut where the problem is I want to add a button with a separate hover effect within the cards. Sort of a hover button within a hover panel, a nested hover. When I do that, the card pops out alright but the button in it with its own hover effect won't hover when I place the mouse cursor over it, It just sits there plain and unresponsive, not unless I sort of quickly jump the mouse cursor from outside the card directly to the button, and that only works sometimes.

     I dunno if this isn't a feature yet or I'm just doing something wrong. Any ideas??? Anyone??? 

Correct answer by Eric5C0B | Community Beginner

Hi. This is easy to do. Just create the components are you usually would and then nest them. It ont work in the XD preview, but it will work in the prototype link. https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/

Eric Forest

TOPICS
How to, Missing feature, Product performance, Prototyping

Views

536

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
Feb 08, 2020 0
Adobe Community Professional ,
Feb 08, 2020

Copy link to clipboard

Copied

Here is tutprial abotu multiple interaction. Let us know if it helps to solve your problem Thanks

Tutorials

"As prototyping workflows continue to evolve, there are more and more ways to interact with your design. Everything from touch, drag and tap gestures, to keyboard shortcuts and voice recognition can not only be used, but combined to trigger a variety of interactions."- Dani Beaumont, Principal Product Manager, Adobe XD.

Watch this tutorial to learn how to combine multiple triggers for a variety of interactions.

Watching time: 1 minute.

 
 
 
 

Tips

 

 

To edit or delete a wire, select the wires to edit or delete them. You can also select a single interaction from the Property Inspector and edit its interactions.

 

 

Hover over the wire to view a tool tip that tells you the number of interactions and their type. 

 

 

To apply the defined interaction to another object, select the object or the artboard, select copy, click on the destination object or artboard, and in the right-click context menu, select Paste Interaction.

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...
Feb 08, 2020 0
New Here ,
Sep 27, 2020

Copy link to clipboard

Copied

This did not solve the op's question. How can we make nested hovers work? Here is a detailed example of what we are trying to do:

I have a ux card with an image, some text and a button:

maniacalpotatoes_0-1601215009876.png

When I hover over the card I want the border color to change:

maniacalpotatoes_3-1601215754715.png

While still hovered on the card, if I hover onto the button, it should change color:

maniacalpotatoes_4-1601215915425.png

While still hovered on the card, if I hover onto the image, I should see a zoom icon:

maniacalpotatoes_7-1601216057695.png

As it stands, XD cannot do this by simply nesting multiple components inside one another, even if they each have hover states. I have even tried instead of nesting, just putting them on the artboard over top of one another, meaning that the card is the base component, and then placing the button and image over it. This still coes not work when previewed because the border triggers first.

If there is another way to accomplish this please help us understand.

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...
Sep 27, 2020 0
Adobe Community Professional ,
Sep 27, 2020

Copy link to clipboard

Copied

Unfortunately, there's no way to accomplish this as of now. It's a limitation of Xd, along with some other lacking features of component states, which make them rather fragile and prone to errors & bugs.

The only way is to compromise and make the first interaction with a click, and have the hover for the button.

 

Other than that, we can just wait for the dev team to fix and improve on these areas...

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...
Sep 27, 2020 1
Community Beginner ,
Oct 16, 2020

Copy link to clipboard

Copied

Yes it can.

https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/

It doesn't work in the XD preview. But it works fine in the testing link.

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
Community Beginner ,
Oct 16, 2020

Copy link to clipboard

Copied

Hi. This is easy to do. Just create the components are you usually would and then nest them. It ont work in the XD preview, but it will work in the prototype link. https://xd.adobe.com/view/36b6a234-04e9-4332-bd88-15876ed26532-63e5/

Eric Forest

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