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

Question

我正在制作一个马里奥主题的应用程序，我希望按钮的效果是当用户使用 his/her 鼠标悬停在它上面时，蘑菇（图像）出现在文本旁边按钮，并在鼠标移动时消失 away.I正在尝试使用 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');
}

图片

悬停

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

javafx 8 create images on button on hover using css

css

image

button

hover

javafx-8

完整示例