悬停效果超过图标

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

以上代码的一些快照......