I see Button has a built in hover property, but wh...

# compose-web

[Sam Michael]

I see Button has a built in hover property, but when I change background color, the hover effect is no longer discernible. I tried to figure out css hover
hover() and

onMouseOver { println("moused over") }

but neither seem to be working. Anyone have any experience with this?

[Oleksandr Karpovich [JB]]

Do I understand correctly that having set onMouseOver on an element there is no "mouse over" in the output?

Could you please share a code snippet reproducing this problem?

[Sam Michael]

Untitled.cpp

[Sam Michael]

Thanks for responding, точно, onClick works as expected but onMouseOver shows no output in console using the above code

[Sam Michael]

Wait, now I see but it seems a little inconsistent, guess I have to play with it more. While we are on the subject, how would I use the CSS hover selector instead?

[Sam Michael]

What I really want is to change the background color of the Button but still retain the ability to tell when you are mousing/hovering over as in its normal state

[Sam Michael]

val backgroundColor = mutableStateOf(rgb(202, 164, 114))
val tileLength = 40.px
Button(
    {
        onMouseOver { backgroundColor.value = rgb(202, 144, 64)}
        onMouseLeave { backgroundColor.value = rgb(202, 164, 114)}
        style {
            outlineStyle("solid")
            padding(0.px)
            border { 1.px }
            backgroundColor(backgroundColor.value)
        }

This seems to work now, I think I forgot that when in inspect tools mouse cursor changes to lens which doesn't register mouse events the same way

[Sam Michael]

message has been deleted

[Oleksandr Karpovich [JB]]

great! you might want to have a look here - https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Style_Dsl#selectors-examples

you can try to use a Stylesheet to add hover rule. So your code won't use inline styles and val backgroundColor = mutableStateOf(rgb(202, 164, 114))

[Yousef]

I can generate a static website? So it's SEO friendly?

[Oleksandr Karpovich [JB]]

@Yousef as for SEO, it's really the same as with other js frameworks. For example https://www.toptal.com/react/react-seo-best-practices