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

Question

我正在制作一个马里奥主题的应用程序，我希望按钮的效果是当用户将鼠标悬停在它上面时，按钮文本旁边会出现一个蘑菇(图像)，并且当鼠标移开时消失。我正在尝试使用 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);
    }

}

样式.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');
}

图片

悬停