javafx 8使用css在悬停按钮上创建图像答案

【问题标题】：javafx 8 create images on button on hover using cssjavafx 8使用css在悬停按钮上创建图像
【发布时间】：2015-07-04 04:27:43
【问题描述】：

我正在制作一个以马里奥为主题的应用程序，我希望按钮具有这样的效果：当用户将鼠标悬停在其上时，按钮文本旁边会出现一个蘑菇（图像），并且当鼠标移开时消失。我正在尝试使用 css 来做到这一点。

如何做到这一点？

【问题讨论】：

标签： css image button hover javafx-8

【解决方案1】：

使用悬停伪类。

.button:hover{
    -fx-graphic: url('your_path_to_image');
}

完整示例

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class Main extends Application {

    public void start(Stage primaryStage) {
        Button button = new Button("Click");
        HBox container = new HBox(button);
        container.setAlignment(Pos.CENTER);
        Scene scene = new Scene(container, 200, 200);
        scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

style.css

.button:hover{
    -fx-graphic: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/16/Mushroom%20-%201UP.png');
}

图片

悬停时

【讨论】：