JavaFX 改变 ImageView 的颜色

Question

你好，我想在你的鼠标悬停在 ImageView 上时改变它的颜色(悬停)

所以我有一个包含这个的 css 文件:

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

这是十字架:

@FXML
    private ImageView cross;

我在 fxml 文件中设置了 fx:id。

现在当我将鼠标悬停在它上面时没有任何反应。

这是我将样式表添加到场景的方式:

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

这就是我在 ImageView 上为 css 设置 id 的方式:

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

那么当我将鼠标悬停在 ImageView 上时，我该如何改变它的颜色呢？

Answer 1

ImageView 的颜色由图像本身的像素数据定义。您可能需要(在外部)创建一个将“背景”更改为红色的替代图像，然后使用 ImageView 的 -fx-image CSS 属性来更改图像显示:

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

其中 images 文件夹与 CSS 文件具有相同的父文件夹(参见 CSS docs on URL。)