Skip to main content
E
ede37471015
Participant
October 2, 2020
Answered

Clickable links hover states

  • October 2, 2020
  • 1 reply
  • 2459 views

Hi, 

I've created a navigation for my prototype. The top level/row of links are clickable to go to other pages/artboards and on their hover state, some of these open a drop-down menu with links. These secondary links should also click through to other pages. I have linked them up, but when I preview nothing happens, they are not clickable. The only way I can click these is to have the drop-down menus already expanded (by defaulting them to the hover state) but obviously this is not what I want to show my client. I feel like this should be simple - any idea what I'm doing wrong? I've tried overlaying transparent shapes that link/overlays etc but to no avail. I would greatly appreciate any tips or an example XD file me could pick apart, thank you. 

    This topic has been closed for replies.
    Correct answer Spas K.

    Remove the hover state from the links in the dropdown. Or make a different component for them.

    Nested hovers don't work (yet), and this might be interfering with the links.

     

    If it doesn't work, upload the file somewhere and link it here, so we can have a look 🙂

    1 reply

    Rishabh_Tiwari
    Rishabh_Tiwari
    Legend
    October 2, 2020

    Hi there,

     

    Thanks for reaching out. If I understood correctly, you want the Hover state inside a hover state clickable? If yes, I am afraid, as of now, we don't have this feature in XD, please upvote this request: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38968075-hover-inside-hover-nested-hovers

     

    If that's not the case, will it be possible for you to share a screenshot of the Prototype Window capturing the wired connection? We'll try our best to help you with it.

     

    Regards

    Rishabh

    E
    ede37471015Author
    Participant
    October 2, 2020

    Hi Rishabh,

     

    It's essentially a click within a hover state. Here's what I have so far 🙂 -

     

     

    1. Top nav link default state:

     

     

    2. Top nav link hover state:

     

     

    3. link on the hover state:

     

    Thanks

    Ed

    Spas K.
    Community Expert
    Spas K.Community ExpertCorrect answer
    Community Expert
    October 2, 2020

    Remove the hover state from the links in the dropdown. Or make a different component for them.

    Nested hovers don't work (yet), and this might be interfering with the links.

     

    If it doesn't work, upload the file somewhere and link it here, so we can have a look 🙂

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