Javafx按钮悬停效果

Question

我有一个按钮，当我移动鼠标时它会改变颜色，但它看起来很僵硬。

我想要CSS过渡色过渡效果。

用翻译工具翻译。不知道大家能不能看懂

public void start(Stage primaryStage) throws Exception {
        // border布局器
        BorderPane borderPane = new BorderPane();
        // Hbox 顶部菜单开始
        HBox menuTop = new HBox();
        menuTop.setStyle("-fx-border-width: 1;");
        menuTop.setStyle("-fx-border-color: #cccc;");
        menuTop.setPadding(new Insets(5,5,5,5));
        menuTop.setSpacing(10);
        Button button1 = new Button("new");
        Button button2 = new Button("open");
        Button button3 = new Button("save");
        Button button4 = new Button("settings");
        Button button5 = new Button("help");
        Button button6 = new Button("about");
        menuTop.getChildren().addAll(button1, button2, button3, button4, button5, button6);
        for (Node Elemt: menuTop.getChildren()) {
            Elemt.setStyle("-fx-border-width: 2;");
            Elemt.setStyle("-fx-border-color: #FFE4C4;");
            Elemt.setStyle("-fx-background-color: #FFDAB9;");
            Elemt.setCursor(Cursor.HAND);
            // I want MouseMoved button background-color effect
            // 鼠标移入
            Elemt.onMouseMovedProperty().set(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
                    Elemt.setStyle("-fx-background-color: #FFC125;");
                }
            });
            // 鼠标移出
            Elemt.onMouseExitedProperty().set(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
                    Elemt.setStyle("-fx-background-color: #FFDAB9;");
                }
            });
        }
        // Hbox 顶部菜单结束
        borderPane.setTop(menuTop);
        // 场景
        Scene scene = new Scene(borderPane);
        primaryStage.setWidth(440);
        primaryStage.setHeight(300);
        primaryStage.setResizable(false);
        primaryStage.setScene(scene);

        primaryStage.show();
    }

Answer 1

您是否尝试过按照以下说明指定 CSS 样式表：

CSS 样式表文件（使用 ID）

文件名：ButtonStyles.css

#my-button {
    -fx-border-width: 2;
    -fx-border-color: #FFE4C4; 
    -fx-background-color: #FFDAB9; /* 鼠标移出 */
    cursor: pointer; // seems like Cursor.HAND
}

/* I want MouseMoved button background-color effect 鼠标移入 */
#my-button:hover {
    -fx-background-color: #FFC125; 
}

#my-button:pressed {
    -fx-background-color: #FFDAB9; /* maybe some other color */
}

然后这些样式将应用于 id 为 my-button 的元素。因此，将样式添加到按钮并设置它们的 id.

Button button1 = new Button("new");
// set id and add stylesheet
Button button2 = new Button("open");
// set id and add stylesheet
Button button3 = new Button("save");
// set id and add stylesheet
Button button4 = new Button("settings");
// set id and add stylesheet
Button button5 = new Button("help");
// set id and add stylesheet

Button button6 = new Button("about");
// set id and add stylesheet
button6.setId("my-button");
button6.getStylesheets().add(getClass().getResource("ButtonStyles.css").toExternalForm());

按钮 1..5 留给你了。

已解释

光标设置为指向手指，css-属性 cursor。样式已从您的 Java 代码中复制。另一个指南是：styling JavaFx buttons with CSS.

您还可以改进并创建一个 List 按钮，这样您就可以将样式添加到循环中的所有按钮。

使用 `Scene`

进行简化

如解释：

JavaFX - CSS tutorial

因此您可以覆盖 CSS-class .button（在 JavaFX 中用于样式按钮）而不是单个 ID。因此，在 CSS 文件中将 id-selector #my-button 替换为 .button。

新 CSS 样式表文件（使用 classes）

文件名：button.css

.button {
    -fx-border-width: 2;
    -fx-border-color: #FFE4C4; 
    -fx-background-color: #FFDAB9; /* 鼠标移出 */
    cursor: pointer; // seems like Cursor.HAND
}

/* I want MouseMoved button background-color effect 鼠标移入 */
.button:hover {
    -fx-background-color: #FFC125; 
}

.button:pressed {
    -fx-background-color: #FFDAB9; /* maybe some other color */
}

为场景添加样式

然后定义场景（可选择限制为适当的尺寸），向其中添加样式表，将其设置到您的容器，它将应用于容器内的所有按钮。

您已经定义了 scene 并将其设置为 primaryStage，很好所以您只需添加 CSS 样式表。

        Scene scene = new Scene(borderPane);
        scene.getStylesheets().add(this.getClass().getResource("button.css").toExternalForm());  // add the CSS stylesheet

        primaryStage.setWidth(440);
        primaryStage.setHeight(300);
        primaryStage.setResizable(false);
        primaryStage.setScene(scene);

        primaryStage.show();

背景颜色的过渡

CSS 转换（用于测试）

它们在教程 CSS Fundamentals: CSS3 Transitions 中进行了解释。您也可以先在常规 HTML 中测试它们，如下所示：

/* NOTE: removed the "-fx-" prefixes from properties, to make it work with HTML in browser

.button {
    border-width: 2;
    border-color: #FFE4C4; /* color-name Bisque */
    background-color: #FFDAB9; /* 鼠标移出 */
    cursor: pointer; // seems like Cursor.HAND
}

.button:hover {
    background-color: #FFC125; /* color-name Goldenrod */
    /* linear transition gradually fading to the color for 1 second */
    -webkit-transition: background-color 1s linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1s linear;
}

<button class="button">Button with Transition</button>

转换必须在 JavaFX

中实现

就像 answer from jewelsea in 2018 解释的那样：

There is no direct support in JavaFX css for animation. You need to perform the animation steps in Java code to modify the css style.

我再次研究了“在 JavaFx 中应用 CSS 转换”，但只找到了遵循官方指南的替代方案 Creating Transitions and Timeline Animation in JavaFX:

How to make an animation with CSS in JavaFX?

抱歉，目前我只能向您解释背景颜色变化和悬停。 线性颜色过渡 已经回答（参见之前的问题）。

Javafx按钮悬停效果

Javafx button hover effect

java

javafx

CSS 样式表文件（使用 ID）

已解释

使用 `Scene`

新 CSS 样式表文件（使用 classes）

为场景添加样式

背景颜色的过渡

CSS 转换（用于测试）

转换必须在 JavaFX

Javafx按钮悬停效果

Javafx button hover effect

java

javafx

CSS 样式表文件（使用 ID）

已解释

使用 Scene

新 CSS 样式表文件（使用 classes）

为场景添加样式

背景颜色的过渡

CSS 转换（用于测试）

转换必须在 JavaFX

使用 `Scene`