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

Question

我正在制作一个Mario主题应用程序，我希望这些按钮具有这样的效果：当用户用鼠标悬停在它上面时，按钮文本旁边会出现一个蘑菇（图像） ，当鼠标离开时消失。我试图用css做这个。

怎么能这样做？

Answer 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');
}

图片

悬停