Standard list/table

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 - as per, say, an Excel spreadsheet or a table in Indesign - evenly, and when you hover the font and row colour changes.

Image below is from Xd

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 - it looked awful.

Any suggestions?

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

Very many thanks,
Adam


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

Hi @ajkeefe47,

Would you have a read-only link to share with us ?
That would help :slight_smile:

I haven’t at the moment - I scrapped all of my previous attempts so far.

I could reproduce where I got to and send a link then, will that be ok?

Many thanks,
Adam

Hi Anthony,

I have another an example here that is a slightly different style but is essentially the same problem: https://preview.webflow.com/preview/cveda?utm_source=cveda&preview=f9336366e29c9be2e47f105e52ea5f8f

In this row I am creating a recessed look, using boarders on the normal state and the altered font and recessed look on the hover.

You can see that I’m almost there but I can only create the second states for all elements individually - not the desired effect at all!

On this one I also added some divides that need to flip or change to look inverted (raised) on hover.

Best wishes,
Adam

Aj here is the simple version.

Basically you overided all of the styles on the child elements so that the parent element wouldn’t change them. If you want certain styles to be changed on the whole parent element you have to set them so they cascade down.

if you want to change background color, font color and font style on on the whole row then you have to set the styles on that row element and the hover on that as well.

https://www.loom.com/share/ed1b8bb6c2db4b44a300e32d795c812f

Hi jbleroux,

This is a great demonstration - I’ll go away and play with it to see if I can nail it.

I got slightly lost on my first viewing just then, but I think the sticking point has been that I’ve assumed that adjusting the ‘sample row’ (div block) hover state doesn’t affect the child elements - font/colour/boarder etc.

I’ll report back - hopefully with some success!

Very many thanks,
Adam

Hi Jeremy,

I’m still having trouble with this.

I’ve reproduced the arrangement, using your stack of elements, although this time I’ve gone with my initial method of using 3 div block columns, wrapped inside a ‘sample row’ and a ‘row rap’.

All I want/need to do is to flick off the boarders of the column divs and switch the font on hover. However adjusting the hover state of the sample row parent element still doesn’t seem to affect the children (the column divs and their children: the text).

I’ve done another link here: https://preview.webflow.com/preview/cveda?utm_source=cveda&preview=f9336366e29c9be2e47f105e52ea5f8f

Watching your demonstration again: When you hover over your sample row and scroll through the fonts in the editor, it changes them in real time. When I click my sample row, it changes that element, behind child elements, leaving them unaffected. I must be missing a way of linking them all together or something?

Very best wishes,
Adam

Here is a more through explanation and some live working an interaction on top.

https://www.loom.com/share/6e9248eb4bad48d49234a3fab793a052

let me know if this makes sense

Hi Jeremy,

Thanks so much - I think I can see where I’m wrong.

Let me play with it and I’ll get back to you.

Very best wishes,

Adam

1 Like