CODEWITHSUNDEEP
javafx-2javafxjavafx-8
Peter Penzov
Peter Penzov

Reputation: 1682

Hover effect over icon

I would like to create buttons like these for settings panel navigation:

enter image description here

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.

Upvotes: 6

Views: 37863

Answers (3)

Yogesh Soni
Yogesh Soni

Reputation: 272

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......

enter image description here

enter image description here

Upvotes: 14

NM Naufaldo
NM Naufaldo

Reputation: 1160

Instead, you can do just 1 line code in CSS, if your FXML file connected with CSS

yourButtonId:hover{-fx-background-color: #6695e2}

Upvotes: 1

tomsontom
tomsontom

Reputation: 5897

Although the above answer works. You should really do this completely in CSS using pseudo-selectors:

java:

btnsa.getStyleClass().add("myButton");

css:

.myButton {
  -fx-background-color:transparent;
}

.myButton:hover {
  -fx-background-color:#dae7f3;
}

Upvotes: 33

Related Questions