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

Multiple Hover States within one component not working

Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

Hello all,

 

I just can't get multiple hover states to work properly within a component.

 

Example: https://xd.adobe.com/view/4081f632-0bbf-48b4-8494-61edd1f5fdde-15d2/

Hovering over the text or the corresponding segment in the pie chart should toggle the four states.

 

Problem: As soon as a hover state is active, no further hover states are triggered, unless you leave the entire component with the mouse cursor.

 

I already discovered this post here, but none of the solutions worked for me.

Am I missing something here or is this simply not possible to realize in Adobe XD?

 

You can download the XD file here

 

Thanks in advance for your support.

TOPICS
How to , Missing feature

Views

220

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 26, 2022 Oct 26, 2022

Hi, I liked the way you explained the problem in the most clear way by pointing out under the sub headlines "Example" and "Problem" 🙂 Sometimes we try to create screencasts/short videos but that might not be always necessary. So I'll also try to explain as clear as possible, there's a workaround for this by making each slice a seperate component with their own hover states, and in hover state of each slice, we need to select hover state on the components panel on the right, and by double clicki

...

Votes

Translate

Translate
Community Expert ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

LATEST

Hi, I liked the way you explained the problem in the most clear way by pointing out under the sub headlines "Example" and "Problem" 🙂 Sometimes we try to create screencasts/short videos but that might not be always necessary. So I'll also try to explain as clear as possible, there's a workaround for this by making each slice a seperate component with their own hover states, and in hover state of each slice, we need to select hover state on the components panel on the right, and by double clicking the component to get into the "inner" level of that hover state and paste the hover design of that slice. While doing this, we need to also paste the text of that slice (like "Donut 97.9 t") in the center of the graph/circle, but since we also need to make the text in default state invisible, we need to add a white bg to our hover text, to cover the text in the default state. Hope I managed to explain, I created hovers for first two states,  donuts and fries, you can see the prototype link here: https://xd.adobe.com/view/bbfc5b06-29f1-473c-ae5f-ae538188781c-eeaf/ 
and the file here: https://www.dropbox.com/s/vjvqntv4wsrilph/pie-chart-hover-edit.xd?dl=0 
Of course there's only one glitch here: every time you roll-out/exit the hover state of the slice you're hovering, first default text ("Total"..) text needs to appear since you can't enter directly another component's hover state without hovering out another element, if you can find a way without first default text appearing please share 🙂 Hope this helps, let me know if you have any questions, btw I liked the design very much! 🙂

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