Copy link to clipboard
I would like to display a list of text where the user can hover over one line of text and the rest of the list turns to a lighter colour.
I have created individual lines of text with a rectangle behind the text to be used as a hover area.
I have then placed the each line of text and it's own hover area in individual groups and then placed all of those groups within a component.
With the component highlighted, I have created a list of states for each line and then edited each state so that only the selected line's text is the original colour and the other lines have a lighter colour.
In the Prototype section I have selected the default state and selected the first line to create a hover over interaction where the destination is the state of the area where the user is hovering over.
I have then gone into each state and done the same so whilst the user has hovered over the first line of text, making all of the below text a lighter colour, the user can then move their cursor down to the next line to then active the hover state for that line which should make that line of text the original colour and all of the rest, including the line above, a lighter colour but this doesn't seem to work and the first line is still the original colour even when I hover over the second line.
Here is a link to what I have done. As you can see, the user cannot move the cursor down the list to change the states. https://xd.adobe.com/view/1f968665-7540-4add-af1f-0bc817f5f167-4ac5/?fullscreen&hints=off
Looking forward to hearing from you with any advice.
Copy link to clipboard
Thank you for reaching out and sorry for the trouble. We would request you to please share the screenshot of your design in 'Prototype' mode so that we can check the interaction and settings.
We will try our best to help.
Thanks for sharing the screenshot, Jonathan22531673zm2b. It did helped us in understanding your workflow. It looks like you've created multiple states of the main component which is why it's applying the hover trigger on the whole component irrespective of the states.
You may try achieving this by creating one component and then applying hover on the instances of the component.
Please also go through this video which might help you.
I have attached the XD file which might help with my explaination
Let us know if that helps.
Thank you for your reply, Harshika_Verma.
I've had a look at the video that you sent and that seems to explain normal hover states, which is great but I'm looking for an inverted look so when the menu item is hovered over, the rest of the menu items change to a lighter colour and the hovered item stays the same colour.
Thank you for sending the file as well. It also looks as though you have made the current item, that is being hovered over, change colour whereas I would like all of the other items to change colour and for the current item to stay the same.
https://we.tl/t-SwvSWk0cdl - Here is your XD project and I have added an artboard to it to show you what I have done so far. If you preview the Test artboard, you can see that the hover over state works on the first item in the list but when I move the cursor from the top item to the second item, it doesn't change state but it will change state if I move the cursor off the list and the onto another item. I have also given each item a hover interaction whilst in the different hover states so in theory it should work without taking the cursor off the item.
Looking forward to hearing any suggestions. If it simply cannot be done, please let me know so that I can explain that to my boss.
Any luck with this problem yet?