Hover state - Please help!

New Here ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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

Views

379

Likes

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

Adobe Community Professional , Apr 16, 2021 Apr 16, 2021
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.

Likes

Translate

Translate
Adobe Employee ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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)

Likes

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
New Here ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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.

Likes

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
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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.

Likes

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
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

  1. Make the text a component
  2. Add a hover state
  3. IMPORTANT STEP: to enter the hover state, you have to double-click on the text.
  4. In the hover state add the photo.
  5. 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

Likes

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
New Here ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

Dan,

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

Likes

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
New Here ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

Hello Dan,

I wonder if you could explain this a bit more, or show a video? I'm trying to do a similar thing, so that when you hover over text, something pops up in a different place on the screen, without having the hover activate when you are hovering over the element that pops up, only when you hover over the text. I tried following your steps but if I double click the text I can't select states, I can only edit the text... Any help is greatly appreciated!

Likes

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
New Here ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

LATEST

Scratch that, I figured it out, Thanks so much!

Likes

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