• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Nested Hovers

New Here ,
Feb 08, 2020 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??? 

TOPICS
How to , Missing feature , Product performance , Prototyping

Views

2.2K

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
community guidelines

correct answers 2 Correct answers

Community Beginner , Oct 16, 2020 Oct 16, 2020

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.

Votes

Translate

Translate
Community Beginner , Oct 16, 2020 Oct 16, 2020

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

Votes

Translate

Translate
Community Expert ,
Feb 08, 2020 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.

Votes

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
community guidelines
New Here ,
Sep 27, 2020 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.

Votes

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
community guidelines
Community Expert ,
Sep 27, 2020 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...

Votes

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

Votes

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

Votes

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
community guidelines
New Here ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

LATEST

Hey, for me it still wont work. I just nested the hover states and checked it out in the prototype link. Can u pls share some pictures of ur project file or something like that. Heres my prototype: https://xd.adobe.com/view/f0458210-e897-4af5-b06b-0daf72036c8d-a516/

Votes

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
community guidelines