Skip to main content
Participant
July 14, 2022
Answered

How to create an XD component contain both a hover state and a hyperlink?

  • July 14, 2022
  • 1 reply
  • 595 views

Hi, I'm designing a website and am fairly new to XD. I'm trying to create a hover state combined with a hyperlink. Is this possible? Thanks!

 

<Title renamed by moderator>

This topic has been closed for replies.
Correct answer AkinGn

Hi @Chuck220567059bl9, as I see it, it's possible to be able to do so if the hover state contains a text (obviously, since we can add hyperlinks to only texts. But if you don't have a text on hover state, you can just create a text element as the same size as the clickable area you want to be and reduce its opacity to 0, to make it invisible.) Let's consider creating a button with text that has a hyperlink on hover. Steps are:

1. Create the button with text and convert it to a component.

2. Create the hover state.

3. While the component's hover state is selected, double click to the button to get into sort of "inner" level of hover state.

4. Select the text while in that "inner" level of hover state.

5. Add hyperlink like you usually add to a text.

 

Let me know if you have any other questions and thank you for giving me another great video tutorial idea, I'll update here if I do one, and honestly I'd like to know about the use case that creates a need for having a hyperlink only on hover. Happy creating! 🙂

1 reply

AkinGn
Community Expert
AkinGnCommunity ExpertCorrect answer
Community Expert
July 15, 2022

Hi @Chuck220567059bl9, as I see it, it's possible to be able to do so if the hover state contains a text (obviously, since we can add hyperlinks to only texts. But if you don't have a text on hover state, you can just create a text element as the same size as the clickable area you want to be and reduce its opacity to 0, to make it invisible.) Let's consider creating a button with text that has a hyperlink on hover. Steps are:

1. Create the button with text and convert it to a component.

2. Create the hover state.

3. While the component's hover state is selected, double click to the button to get into sort of "inner" level of hover state.

4. Select the text while in that "inner" level of hover state.

5. Add hyperlink like you usually add to a text.

 

Let me know if you have any other questions and thank you for giving me another great video tutorial idea, I'll update here if I do one, and honestly I'd like to know about the use case that creates a need for having a hyperlink only on hover. Happy creating! 🙂