JavaFX 按钮悬停缩放

Question

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

我猜它可以通过带有 Scale 转换或 CSS 的 JavaFX 代码来完成。在 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 代码一样吗？（意思是我只需要将“-fx-[buttonID]”放在前面就可以了？）

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

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

Answer 1

Node有一个-fx-scale-x,-fx-scale-y和一个-fx-scale-zCSS 属性，它们的默认值为1。Node是超类，Button因此这些属性是继承的。

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

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

要查看不同控件具有哪些 CSS 样式，您可以查看链接指南，还可以查看JavaFX 8 (modena.css)的默认样式表。

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