Participating Frequently

Answered

Hover state - Please help!

Forum|Forum|5 years ago
April 16, 2021
2 replies
1268 views

Helllo,

I'm designing a webpage in XD. On the homepage I have a list of names. I'm trying to create a design in which if the user hovers over a name then an image will appear on the page. Could anyone tell me if this is possible? Ive tried everything with componnents and hover states and I cant get it to work 😞

Any help would be appreciated.

Thanks!

Karl

This topic has been closed for replies.

Correct answer Dan Rodney

Make the text a component
Add a hover state
IMPORTANT STEP: to enter the hover state, you have to double-click on the text.
In the hover state add the photo.
Switch the component back to the default state

Test it and it should work.

Dan Rodney

Correct answer

Community Expert

Make the text a component
Add a hover state
IMPORTANT STEP: to enter the hover state, you have to double-click on the text.
In the hover state add the photo.
Switch the component back to the default state

Test it and it should work.

Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

K

Karl5FC9Author

Participating Frequently

Dan,

Amazing! It worked! Thank you so much! 🙂 🙂 🙂

A

Abhidas

Participating Frequently

Hi Karl,

Thanks for psoting your issue here. Can you share some reference video, like what exactly are you trying to achieve here?

I have attached a video, can you check and let us know if this is what you want?

Regards,

Abhishek Das (Adobe XD Team)

Hover_Name_Avatar_Show.zip

K

Karl5FC9Author

Participating Frequently

Hi Abhishek!

I've attached a video below to illustarte what im trying to achieve. Wondering if it's achieveable at all? Thank you so much.

hover_state.zip

Chris W. Griffith

Community Expert

It is possible, but your component might be clunky as it the element you hover on and the connected image would have to be within the same component. There is no way for XD to say when you hover over component X then change the state of this other element.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.