Question

我开始学习JavaFX效果，但我似乎无法在悬停时找到关于按钮scalling的任何相关信息。

我猜测它可以通过带有Scale转换的JavaFX代码或使用CSS来完成。在CSS中我找到了一种在鼠标悬停时增长按钮的方法，但我不知道如何将它实现到JavaFX。

以下是html的纯css代码中的增长悬停效果：

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

我怎样才能将css代码转换为fx-css代码？ css代码与fx-css代码相同吗？（意思是我只需要把＃34; -fx- [buttonID]＆＃34;放在前面，那就好了吗？）

如果有任何关于CSS动画的信息以及类似JavaFX css的信息，我想知道。

你能帮我完成这项任务吗？

Answer 1

Node有-fx-scale-x，-fx-scale-y和-fx-scale-z CSS属性，其默认值为 1 。 Node是Button的超类，因此这些属性是继承的。

要将其应用于应用程序中悬停的任何按钮，请将此css selectpr添加到样式表中：

.button:hover {
    -fx-scale-x: 1.1;
    -fx-scale-y: 1.1;
    -fx-scale-z: 1.1;
}

要查看不同控件的CSS样式，您可以查看链接指南，还可以查看default stylesheet for JavaFX 8 (modena.css)。

要了解如何使用CSS设置应用程序样式，可以查看tutorial。

JavaFX Button悬停缩放

1 个答案: