javafx ImageView如何使用css hover

Question

我已经使用 ImageView 使用 JavaFX 制作了一些自定义按钮

<ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#doExit" onMouseEntered="#doHighLight" onMouseExited="#doReset" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" fx:id="xIcon">
    <image>
        <Image url="@imges/icons/x.png" />
    </image>
</ImageView>

为了突出显示我使用了鼠标监听器

public void doHighLight(){
    //System.out.println(xIcon.getImage());
    Image itmp= new Image("/gui/imges/icons/xSelected.png");
    xIcon.setImage(itmp);
    //xIcon.setImage(new Image("./imges/icons/x.png"));
    }

public void doReset(){
    xIcon.setImage(new Image("/gui/imges/icons/x.png"));
}

如您所见，这不是最好的方法，所以我尝试了一些 CSS，但它不起作用。为什么？

#xIcon:HOVER {
    -fx-image: url('@../imges/icons/xSelected.png');
} 

文件位置如下:

/app/GuiController.java
/gui/style/main.css
/gui/imges/icons/x.png
/gui/imges/icons/xSelected.png

Answer 1

不工作的原因有:

1) 为 ImageView 设置 id = "xIcon"。 fx:id 和id 是不同的属性。
2) 您不能使用@ 进行位置解析。在 FXML 文件中是，但在 CSS (JavaFX) 文件中不是。
3)伪类似乎不区分大小写。所以使用 :hover 而不是 :HOVER。

有关更多信息，请参阅 JavaFX 的 CSS 引用指南。