javafx ImageView 如何使用 CSS 悬停

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( 为图像视图设置id = "xIcon"。 fx:id和id是不同的属性。
2( 不能使用@进行位置解析。在FXML文件中是的，但在CSS(JavaFX(文件中不是。
3(伪类似乎不区分大小写。所以使用:hover而不是:HOVER。

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