PricingDocsAcademy
...
Tue, Jan 14, 12:02 AM
Log inSign up
Log inSign up
All topics

Parent is hovered effects on children

  • ssssadsadasd

    20 days 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

    20 days ago

    @Ben H any input on this? thanks

  • Ben H

    20 days 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

    20 days ago

    thanks 👍

  • Lucas G

    20 days 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

    20 days 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

    10 days 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

    10 days 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

    10 days 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

    10 days ago

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

  • Lucas G

    10 days 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

    10 days ago

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

    Xioteer

    10 days 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

    10 days 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
  • /attachments/1321136035870015525/1324796021112311960/image.png

    Xioteer

    10 days ago

    You mean like this?
    image.png

  • Lucas G

    10 days ago

    Yup

  • Xioteer

    10 days 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

    10 days 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

    10 days ago

    so it's just a few text bits. Nice

  • Lucas G

    10 days ago

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

  • Xioteer

    10 days ago

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

  • Lucas G

    10 days 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

    10 days ago

    Got it!
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Møller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

© Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle