Skip to main content
fsTMk
fsTMk
Inspiring
Nov 10, 2019 7:02 AM UTC
Answered

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

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>

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Peter Villevoye
    Peter VillevoyeCorrect answer
    Community Expert
    Mar 13, 2020 11:33 PM UTC

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

    View reply

    7 replies

    alinasirky
    alinasirky
    Participant
    Aug 1, 2022 9:24 PM UTC

    You can use multiple hovers within a hover state in Adobe Xd.
    If you want to have a 'menu' where you have another drop-down, then you'll have to make hovers in the sub-menu and then add it to the first menu hovers. So, no matter how many hovers you want, you should start from the last hover and then add it back to the first.

    Also, if you have the hover for 'web design' which is another menu dropdown, this sub-menu should be completely hidden in its default state, and then set to unhide its hover state. Lowering opacity should be avoided or moving the cursor in this space 'shown in the red rectangle' can trigger the hover.

    I have added a file where I have explained this whole process. 
    File; https://xd.adobe.com/view/1ef28dea-c8ec-457d-a420-2a3ec9bac6ad-4ba1/

    I hope this helps. 


    Translate
      Harshika Verma
      Community Manager
      Harshika VermaCommunity Manager
      Community Manager
      Aug 2, 2022 6:29 PM UTC

      Thank you, @alinasirky , for sharing the workflow. This will help our customers creating a similar workflow.

       

      Please feel free to reach out if you face any trouble with XD in future.

       

      We would be happy to help.

       

      Thanks,

      Harshika

      Translate
        Eric Forest
        Inspiring
        Oct 16, 2020 1:54 PM UTC

        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/ 

        Translate
          Peter Villevoye
          Community Expert
          Peter VillevoyeCommunity ExpertCorrect answer
          Community Expert
          Mar 13, 2020 11:33 PM UTC

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

          Translate
          Andy VanWag
          Participant
          Mar 13, 2020 2:29 PM UTC

          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-inside-hover-nested-hovers

          Video:

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

          Translate
            Harshika Verma
            Community Manager
            Harshika VermaCommunity Manager
            Community Manager
            Nov 11, 2019 12:43 PM UTC

            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

            Translate
              Sjaani
              Community Expert
              SjaaniCommunity Expert
              Community Expert
              Nov 11, 2019 1:11 AM UTC

              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.

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