Skip to main content
Emishonowayi
Emishonowayi
Participant
February 8, 2020
Answered

Nested Hovers

  • February 8, 2020
  • 2 replies
  • 3199 views

  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??? 

This topic has been closed for replies.
Correct answer Eric Forest

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

2 replies

E
Eric ForestCorrect answer
Inspiring
October 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

    TAXIDRIVER1337
    TAXIDRIVER1337
    Participant
    December 10, 2020

    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/

    Ares Hovhannesyan
    Community Expert
    Ares HovhannesyanCommunity Expert
    Community Expert
    February 8, 2020

    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.

    maniacalpotatoes
    maniacalpotatoes
    Participant
    September 27, 2020

    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:

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

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

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

    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.

      Spas K.
      Community Expert
      Spas K.Community Expert
      Community Expert
      September 27, 2020

      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...

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices