javafx ImageView how to use css hover


I have made some custom buttoms with the JavaFX using ImageView

<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 url="@imges/icons/x.png" />

in order to do highlighting I have used mouse listeners

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

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

As you can see it not the best way to do it so I have tried some css but its not working. Why?

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

the file locations are as follows :

9/3/2014 4:09:15 PM

Accepted Answer

There are some reasons for not being worked:

1) Set id = "xIcon" for ImageView. fx:id and id are different attributes.
2) You can't use @ for location resolution. In FXML file yes but not in CSS (JavaFX) file.
3) It seems the pseudo-classes are not case insensitive. So use :hover instead of :HOVER.

For more information please refer to JavaFX's CSS reference guide.

9/4/2014 4:50:22 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow