Silly question about hover color

A simple question: I have a Container (parent) with a Container (child) inside it. How do I make Container (child) change background color when the mouse enters Container (parent)?

I could not find the way.

It would be easy to do this if the Background section also had (as in the Transform section) the ability to be able to select Over (Self, Parent, Container, Grid, Flex, Custom ID).

But which it does not have:

Same for the color setting in the SVG component. Here the Over property is there but you can only select between Self and Parent. If also here there was the possibility at least to select Custom ID it would be easy to change color when the mouse enters a specific component.

Actually, speaking generally, it would be very useful to be able to set the hover state (with Self, Parent, Container, Grid, Flex, Custom ID) for Margin, Padding, Opacity and certainly other properties as well.

The Container doesn’t currently support this workflow, there are some technical issues that would make this tricky to achieve, but if enough people request it we will certainly take a look at adding that feature :slight_smile:

I sincerely hope you can solve these technical problems because it is a really common thing to want to change the color of an element (but also its opacity) based on mouse hover over its parent.

Elements is an advanced software, I think it would be a pretty major shortcoming not to include these features, even if are not fundamental.
For now I will achieve the goal by inserting some CSS code.

FYI (not sure if you’ve seen this yet): you can use the Advanced→CSS Classes box to add Tailwind classes to each component :slight_smile:

Yes, I will certainly try TailwindCSS classes first :+1: