Hover effect over icon

javafx, javafx-2, javafx-8

Solution

You have to use MouseEntered and MouseExited events for getting hover effects over the icons. try this its working.........

btnsa.setStyle("-fx-background-color:transparent;");
btnsa.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("JavafxSm.gif"))));

btnsa.setOnMouseEntered(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:#dae7f3;");
    }
});

btnsa.setOnMouseExited(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:transparent;");
    }
});

some snap shots of above code......

Problem

I would like to create buttons like these for settings panel navigation: Can you tell me how I can create this hover effect over the icons? The most difficult part for me is to create CSS code which looks like the the picture.

Original source