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?

[`ImageView`](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#imageview) doesn't define a `-fx-background-color` css property. In most cases, an `ImageView` is completely filled by its image anyway, so it's not quite clear what you want here. — James_D, May 01 '15 at 18:15
I just want to change the color of the image when you hover over it — Kiraged, May 01 '15 at 18:15
https://stackoverflow.com/questions/18124364/how-to-change-color-of-image-in-javafx — Wolfgang Fahl, Aug 07 '18 at 09:25

score 4 · Accepted Answer · answered May 01 '15 at 18:21

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.)

JavaFX change color of ImageView

1 Answers1