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.
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.
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.
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’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).
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?