How can I change a child element CSS when the parent is hovered with Compose Web's Style DSL? In CS...

# compose-web

[MrPowerGamerBR]

How can I change a child element CSS when the parent is hovered with Compose Web's Style DSL?

In CSS, it is like this

.parent:hover .child { /* rules here */ }

However I'm not able to figure out how to represent that in the Style DSL 😞

[Akif Abasov [JB]]

object MyStyleSheet : StyleSheet() {
   init {
     ".parent:hover .child" {
        /* rules here */
     }
   }
}

or

object MyStyleSheet : StyleSheet() {
   val parent by style {}
   val child by style {
       parent + ":hover " + self {
           /* rules here */
       }
   }
}

[MrPowerGamerBR]

The second snippet doesn't seem to be working, it is applying the rules to the child even if I'm not hovering the parent 😭

However the first snippet works without any issues 🙂

[Akif Abasov [JB]]

@MrPowerGamerBR, can you paste here how exactly looks snippet which doesn’t work for you? I need to check it. It should work

[MrPowerGamerBR]

@Akif Abasov [JB]

object TestStylesheet : StyleSheet() {
    val parent by style {
        backgroundColor(Color.red)
    }

    val child by style {
        fontSize(16.px)

        parent + ":hover " + self {
            /* rules here */
            fontSize(32.px)
        }
    }
}

[MrPowerGamerBR]

message has been deleted

[Akif Abasov [JB]]

thanks, i’ll check it. It looks like a bug.

[Akif Abasov [JB]]

could you try?

(parent + ":hover " + self) {
            /* rules here */
            fontSize(32.px)
        }

[MrPowerGamerBR]

Also doesn't work: Only the "fontSize(16.px)" rule is applied

[MrPowerGamerBR]

message has been deleted

[Akif Abasov [JB]]

oh… i think i know what’s wrong. parent is just “parent”, while it should be “.parent”

Try

className(parent) + ":hover " + self

[MrPowerGamerBR]

😭

[MrPowerGamerBR]

className seems to return a CSSClass object, so it fails to + with a string

[Akif Abasov [JB]]

yeah, it’s signature problem. I’ll fix this

[Akif Abasov [JB]]

problem is here. Anyway thank you for feedback. I’ll fix this stuff

[MrPowerGamerBR]

Thanks! 🙂

[Tuna]

I'm not sure why but I tried

init {
    "$parent:hover $child" {
        ...
    }
}

without succeed

[Tuna]

As I check with the console log, the key "parent:hover child" is in the rule list but the style is not applied.
With single selector like "p", it works well