javafx ImageView how to use css hover


Question

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

in order to do highlighting I have used mouse listeners

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"));
}

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 :

/app/GuiController.java
/gui/style/main.css
/gui/imges/icons/x.png
/gui/imges/icons/xSelected.png
1
1
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.

1
9/4/2014 4:50:22 AM

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