JavaFX 在悬停时更改图像 - CSS

本文将介绍如何使用JavaFX和CSS代码来更改图像的样式，以实现鼠标悬停时更改图像。

CSS

在使用JavaFX时，我们可以通过CSS样式表来控制UI组件的样式和行为。在此示例中，我们将使用CSS来更改图像的外观。

更改样式

我们可以使用CSS伪类:hover来检测鼠标悬停，并更改图像的样式。使用以下代码：

#image{
    -fx-image: url('path/to/image1.png');
}

#image:hover{
    -fx-image: url('path/to/image2.png');
}

代码解释：

• 我们在CSS中定义了一个具有“image”ID的节点，该节点包含我们想要在其中显示图像的JavaFX ImageView。我们通过指定图片的路径来设置外观，如上所示。
• 当鼠标悬停在图像上时，我们使用:hover伪类选择器来应用新的样式（新图像的路径）。

在JavaFX应用程序中使用CSS

要在JavaFX中使用我们的CSS样式表，我们需要在代码中加载和应用该样式表，如下所示：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        primaryStage.setTitle("JavaFX Change Image on Hover with CSS");

        // 加载图片并使用ImageView创建节点
        ImageView imageView = new ImageView("path/to/image1.png");
        imageView.setId("image");

        // 创建Pane并将节点添加到其中
        StackPane root = new StackPane();
        root.getChildren().add(imageView);

        // 加载CSS样式表并将其应用于场景
        Scene scene = new Scene(root, 300, 300);
        scene.getStylesheets().add("path/to/style.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

代码解释：

• 首先，我们加载了第一张图像并使用它创建了一个ImageView节点，将其ID设置为“image”以便我们能够在CSS中引用它。
• 接下来，我们创建了一个StackPane并将ImageView添加到其中。
• 然后，我们加载CSS样式表并将其应用于场景，该场景包含了创建的StackPane。
• 最后，我们显示了主舞台并启动了程序。

如果我们现在将鼠标悬停在图像上，就会看到显示的新图像。