悬停效果超过图标

Question

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

你能告诉我如何在图标上创建这种悬停效果吗？对我来说最困难的部分是创建看起来像图片的CSS代码。

Answer 1

虽然上面的答案有效。您应该使用伪选择器在CSS中完全执行此操作：

的java：

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

的CSS：

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

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

Answer 2

您必须使用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 3

相反，如果您的FXML文件与CSS连接，则只能在CSS中执行1行代码

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