悬停效果在图标

Question

我想创建这样的用于设置面板的导航按钮：

你能告诉我怎样才能建立在图标上悬停这个效果？对我来说最困难的部分是创建看起来像图片的CSS代码。

Answer 1

您必须使用MouseEntered和MouseExited事件才能在图标上获得悬停效果。 试试这个它的工作.........

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

一些抓拍上面的代码中投......

Answer 2

虽然以上答案的作品。在CSS中使用伪选择你真的应该这样做完全：

的java：

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

CSS：

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

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