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

Clickable links hover states

Community Beginner ,
Oct 01, 2020 Oct 01, 2020

Copy link to clipboard

Copied

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. 

Views

1.7K

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 1 Correct answer

Community Expert , Oct 02, 2020 Oct 02, 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 🙂

Votes

Translate

Translate
Adobe Employee ,
Oct 02, 2020 Oct 02, 2020

Copy link to clipboard

Copied

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

 

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

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 02, 2020 Oct 02, 2020

Copy link to clipboard

Copied

Hi Rishabh,

 

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

 

 

1. Top nav link default state:
1.png

 

 

2. Top nav link hover state:

2.png

 

 

3. link on the hover state:
3.png

 

Thanks

Ed

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 ,
Oct 02, 2020 Oct 02, 2020

Copy link to clipboard

Copied

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 🙂

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 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

LATEST

Great thanks so much Spas K, I stripped it back, it was a nesting thing 🙂

 

Ed

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