Hover effect over icon


Question

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.

1
5
11/22/2013 11:15:40 AM

Accepted Answer

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

13
11/23/2013 4:40:12 AM

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

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