how to add hover to property using `org.jetbrains....
# compose-web
d
how to add hover to property using
org.jetbrains.compose.web.css.StyleScope
? ex:
Copy code
Span({
  style { // this is org.jetbrains.compose.web.css.StyleScope, not org.jetbrains.compose.web.css.CSSBuilder
    property("color", "#fff") // <-- hover??
  }
})
compose
1.1.0-alpha05
o
d
yeah, but i don't need (would not use) a stylesheet object for a single hover can't understand why there are 2 different apis: the one i would like to use: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt#L43 i think should use
org.jetbrains.compose.web.css.CSSBuilder
interface instead of
org.jetbrains.compose.web.css.StyleScope
the one you are suggesting: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt#L48
org.jetbrains.compose.web.css.CSSBuilder
(so hover etc..)
d
That's not Compose for Web's fault, that's html / css
Basically some things you can only define in style sheets
You can search up and read about psuedo elements and pseudo classes
These simply aren't allowed in inline styles, which is what you are using here. In other words, your code above would translate to this element:
Copy code
<span style="color:#fff" />
☝️ The style is defined "inline", e.g. inside the tag, vs. say
<span class="external-style" />
where the style info is now detached and associated with that class name and can be defined elsewhere (often a style sheet).
It's weird for us because, in the world of Compose for Web, we're just writing Kotlin, and everything looks like code. But in the world of html / css, stylesheets are encouraged and inline styles are discouraged (because I'd assume separation of concerns / decoupling -- in theory you can swap a new stylesheet in / out and completely change the look and feel of a well written site)
FWIW, I'm working on my own layer on top of Compose for Web which approaches this in a slightly different direction. It's called Kobweb if you wanted to check it out. With Kobweb, you could do something like this for your above example:
Copy code
val MyHoverableSpanStyle = ComponentStyle("hoverable-span") {
  base { Modifier.color(Colors.White) }
  hover { Modifier.backgroundColor(Colors.Yellow) }
}

Span(MyHoverableSpanStyle.toModifier().asAttributesBuilder()) { ... }
🙏 1
I'll leave things there for now -- let me know if you had any followup questions!
🙏 1
364 Views