javafx-2 - 悬停效果超过图标

我想为设置面板导航创建类似这些的按钮:

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

最佳答案

您必须使用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;");
    }
});

以上代码的一些快照……