Edit the color of a child on hover

Hi,

I have a “large” div, with padding, and contain some text (p) elements.
I want to change the color of the text, when the div is on “hover” state.
I tried to add some custom CSS on the DIV, but I don’t know how to select a child element.

Thanks,

JM

1 Like

Hey JM,

That’s a very interesting question (and need).
I’m interested in doing this also: aka CSS parent heritage / default CSS value.
Maybe we will be able to do this natively soon with the new states coming.

As for now, I would create 2 workflows on the parent element to set bool variable to true on mouse enter and set the variable to false on mouse leaveevent.
You can then bind the color property of your text to this variable using something like :
if(mouse_over,"#FFFFFF","#000000").
If many elements: don’t do a bool variable but store and test the ID of your element.

Not clean but… hope it helps.

Matth-

Are you sure that it’s required to use workflows / variables for a so simple task ?
It should be basic CSS…

I might very well be wrong. This is my current understanding (but I’m new).
Maybe people from WeWeb themselves will see your post and will have a different/better solution.
@Joyce ? @aurelie ?

Have a nice day.

This is indeed quite complicated at the moment, but will be very easy after the release of the new states (currently in QA).
I will let you know as soon as this is available :slight_smile:

1 Like

States don’t control the children as intended with proper HTML structure, if you have a solution to this please let us know.

The solution is to select hover state of the parent, and activate the option “Apply to children”
Then on any child you can select the state “parentContainerName:hover” (will be on the list)

1 Like

Worked nicely, thanks.

Hello @aurelie
This topic from May and last year, but now, I wanna use that effect of “parent css”.
but now, in a div, I cant find where is the “Apply to children”, so, where can I find it?

Hello @eric

Just expand State section on the right sidebar :slight_smile:

image

1 Like