Change color of element on hover (Dioxus, WASM)

help
1

I can't figure out how to change the color of text in span or by changing the class atribute.

fn main() {
    dioxus_web::launch(launcher)
}

fn launcher(cx : Scope) -> Element {
    cx.render(rsx!{
        div {
            display : "flex",
            flex_direction : "column",
            width : "100%",
            div {
                display : "flex",
                justify_content : "flex-start",
                span {
                    class : "testing",
                    color : "red", // Need change here.
                    onmousedown : move |event| {

                    },
                    "This is a left text"
                }
            }
            div {
                display : "flex",
                justify_content : "flex-end",
                span {
                    class : "testing",
                    color : "blue",
                    "This is a right text"
                }
            }
        }
    })
}

My brain is being destroyed. I.e. when I want to change the color only for hovered element using the jQuery I simply write :

$(this).css("color", "black")

How can I change the color in this case?

2

In CSS you'd do this:

.testing:hover {
    color: "black"
}
3

Yeah, I know. But for me the main thing to solve is how to do it in diouxus, because there is no css. And all styles are marked inside the containers.

4

It definitely has CSS. Either add a file or add a style node:

let css = r#".testing:hover {
    color: "black"
}"#;
let style_node = rsx!(style {
    "{css}"
});
5

Hmmmm, thx. I’ll try it today. Hope it helps

6

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.