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.
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
...Copy link to clipboard
Copied
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! 🙂