All topics

Parent is hovered effects on children

ssssadsadasd

3 months ago

When a parent is hovered I want to change the background color of the children (but not of the parent itself). how can i do so? thanks
✅1
ssssadsadasd

3 months ago

@Ben H any input on this? thanks
Ben H

3 months ago

You could make an isHovered variable. On the parent you can create mouseenter and mouseleave events to set the variable to true or false. Then on the child you can make an isHovered class that you bind to this variable. You can then style that class in the style panel.
ssssadsadasd

3 months ago

thanks 👍
Lucas G

3 months ago

You can achieve this with a <style> element as well using CSS (descendant combination)
Then no extra JavaScript is added to the page
Lucas G

3 months ago

https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
@Lucas G
You can achieve this with a <style> element as well using CSS (descendant combination)
Xioteer

3 months ago

But like this we would end up having css again in many different places, if am not completely wrong here?

Because for this we would nee the style element placed somewhere to be able to work on that, while creating a variable and using a formula to activate the conditional style would keep it neat and tidy in the element's sidebar.

Just found this on my search as I am facing the same issue
@Xioteer
But like this we would end up having css again in many different places, if am not completely wrong here?

Because for this we would nee the style element placed somewhere to be able to work on that, while creating a variable and using a formula to activate the conditional style would keep it neat and tidy in the element's sidebar.

Just found this on my search as I am facing the same issue
Lucas G

3 months ago

You would technically, yes.
I would keep the <style> element in the component itself, not elsewhere
Then it’s still tied to the component at least
Lucas G

3 months ago

The reason why I use a <style> element for this is that descendent selectors are not natively supported in the UI yet. The team is aware that they’re important but they’re not sure how to implement them in a nice way (the UI can quickly get huge if they add every CSS option)
Xioteer

3 months ago

you mean working with the attribute? or just drop the style element in the element itself?
Lucas G

3 months ago

And I do not want to add JS for this functionality
It is also easier to do with CSS anyways
@Xioteer
you mean working with the attribute? or just drop the style element in the element itself?
Lucas G

3 months ago

Just add the element to the component itself
@Lucas G
And I do not want to add JS for this functionality
Xioteer

3 months ago

it does make sense. I just did it with the variable and adding 4 events just for a button icon change on hover seems massively overkill already
Lucas G

3 months ago

Yup. And if it’s a large app, adding extra JS is just not the way to go
CSS already handles it very well
Xioteer

3 months ago

You mean like this?
Lucas G

3 months ago

Yup
Xioteer

3 months ago

wouldn't that cause many stylesheets?

I have to admit I have not looked into the front-end yet how this is solved there then
many stylesheets if I did this several times*
Lucas G

3 months ago

It doesn’t add a global stylesheet, no. The style element lives in the DOM itself.
That said, multiple stylesheets are not a bad thing. It allows for modularity and loading the needed styles for the relevant page vs loading one large stylesheet for everything
@Lucas G
It doesn’t add a global stylesheet, no. The style element lives in the DOM itself.
Xioteer

3 months ago

so it's just a few text bits. Nice
Lucas G

3 months ago

Also, depending on how stylesheets are deployed, they can be cached
So multiple stylesheets are not necessarily a bad thing
Xioteer

3 months ago

Yeah, overall your approach seems a bit more lightweight, yes
Lucas G

3 months ago

This isn’t a stylesheet though just to clarify again lol. It is an inline style
@Lucas G
This isn’t a stylesheet though just to clarify again lol. It is an inline style
Xioteer

3 months ago

Got it!
ssssadsadasd

2 months ago

@Lucas G any chance you can create a short implementation of this? I am stuck at the style element and dont understand the rest of the instructions. thanks
Lucas G

2 months ago

Examples are in the link
selector1 selector2 {
/* property declarations */
}
Lucas G

2 months ago

You can target states as well
selector1:hover selector2 {
/* property declarations */
}
ssssadsadasd

2 months ago

@Lucas G
1. hmm but are these selectors inside the style element? If I have a container of type style and an svg or a text element as its children nothing is shown.
2. is selector1 the style element?
Lucas G

2 months ago

A style element is simply to type in your CSS
ssssadsadasd

2 months ago

[here](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test2?leftpanel=design&canvas-width=800&canvas-height=800&rightpanel=attributes&selection=nodes.j1hlFTri9EGz8_5KUvwqW) I have two divs: one with id = separator1, and its child with id = separator2. I also have a style element with this css: selector1: hover selector2 {
background-color: red;
}:

however, when I hover the color does not change. any idea why? thanks
Lucas G

2 months ago

Because you deleted the text element where you are supposed to type in the CSS
Lucas G

2 months ago

I fixed the CSS, were you able to see it?
ssssadsadasd

2 months ago

@Lucas G ah ok was not aware that the css for style was to go on the text element inside it (I added it on the style itself)

nevertheless I still could not make it work 😦
Lucas G

2 months ago

In CSS, you target ids with a #
You'll need to learn CSS syntax to use it
ssssadsadasd

2 months ago

ah now I made it work. yeah probably that is a good idea thanks

Parent is hovered effects on children

ssssadsadasd

ssssadsadasd

Ben H

ssssadsadasd

Lucas G

Lucas G

Xioteer

Lucas G

Lucas G

Xioteer

Lucas G

Lucas G

Xioteer

Lucas G

Xioteer

Lucas G

Xioteer

Lucas G

Xioteer

Lucas G

Xioteer

Lucas G

Xioteer

ssssadsadasd

Lucas G

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community