Unable to create changeable states whilst hovering over a list of text in XD

Report · Jan 18, 2022

Hi
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.

Report · Jan 19, 2022

Hi Jonathan22531673zm2b,

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,

Harshika

Report · Jan 19, 2022

Hi Harshika

Thank you for your reply.

Please find attached some screenshots. I'm not sure what would be useful for you to view in the screenshots so please let me know what you would like to see if these don't help.

Many thanks

Report · Jan 19, 2022

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.

Thanks,

Harshika

Report · Jan 20, 2022

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.

Many thanks

Report · Jan 26, 2022

Hi Harshika

Any luck with this problem yet?

Many thanks