Question

我使用ImageView

使用JavaFX制作了一些自定义的buttoms

<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参考指南。

javafx ImageView如何使用css悬停

1 个答案: