懸停效果在圖標

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