Streaming live at 10am (PST)

Simple list states on hover?

Hi all,

I’ve been stuck on this for over a week now.

I want to create a list menu page where the rows are laid out evenly - as per, say, an Excel spreadsheet or a table in Indesign - and when you hover the font and row colour and boarder changes to create a recessed effect.

https://preview.webflow.com/preview/cveda?utm_source=cveda&preview=f9336366e29c9be2e47f105e52ea5f8f

I’ve tried:

  • Separating out each column into individual div blocs, then placing all three into a single row div bloc and changing all their states on hover. However it won’t let me change the states of any of the children when I’m changing the state of a parent.
  • I’ve also tried putting both states of each of the child elements in the row div bloc and animating a ‘show/hide’ to swap them in.out on hover. This actually worked but it was super flickery when you duplicated out for the whole list (20 in total) - it looked awful.

Does anyone have suggestions?

This seems like a simple construction - given the capability of Webflow I’m assuming I must be missing something.

This is an image from my XD design file:

Very many thanks,
Adam


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Use interactions instead of using the “states” option you have.