JavaFX change color of ImageView

Question

Hello i'm trying to change the color of an ImageView when your mouse is on it(hover)

So I have a css file that contains this:

.cross:hover {
    -fx-background-color: red;
}

And this is cross:

@FXML
    private ImageView cross;

I set the fx:id in the fxml file.

Now nothing happens when I hover over it.

This is how I add the style sheet to the scene:

scene.getStylesheets().add(getClass().getResource("Style.css").toExternalForm());

This is how I set the id for css on the ImageView:

cross.getStyleClass().add("cross");

So how would I change the color of the ImageView when I hover over it?

Answer 1

The color of an ImageView is defined by the pixel data in the image itself. You probably need to create (externally) an alternative image with the "background" changed to red, and then use the -fx-image CSS property of ImageView to change the image displayed:

.cross {
    -fx-image: url(images/cross.png);
}
.cross:hover {
    -fx-image: url(images/red-cross.png);
}

where the images folder has the same parent folder as the CSS file (see CSS docs on URL .)