JavaFX 内联 CSS 悬停效果答案

【问题标题】：JavaFX inline CSS hover effectJavaFX 内联 CSS 悬停效果
【发布时间】：2018-11-25 20:40:23
【问题描述】：

我正在通过从标签扩展来构建服装按钮。我知道您可以在 .java 文件中使用 CSS：

setStyle("-fx-background-color: #101010");

这很酷，我经常使用它。

但是我的问题是：这似乎不适用于悬停效果。在外部 CSS 文件中，您可以：

#LabelButton:hover {
  -fx-background-color: #aaaaaa;
}

我想在我的 Java 文件中使用“XXX:hover”这个功能，因为十六进制颜色代码必须是可变的，而这在使用外部 CSS 文件时是不可能的。所以我有点想拥有它：

setStyle("hover:-fx-background-color: #101010");

但我找不到正确的语法，更不用说有语法了。如果没有这样的功能，那我该怎么做呢？谢谢！

【问题讨论】：

从纯粹主义者的角度来看，分配类和ID并将css放在单独的文件中会更干净。只是我的 2 美分。
我知道，我知道。但正如我所说，它对我不起作用，因为我需要使十六进制颜色代码变量
如果您的问题与外部 CSS 文件有关，您也可以将 CSS 放在
查看您的问题历史，我几乎看不到任何回复。您可能想查看What should I do when someone answers my question?。对 cmets 的回应也可能很好。
什么意思？

标签： java css user-interface javafx

【解决方案1】：

在内联 CSS 中无法使用任何类型的选择器。内联样式始终应用于节点，无论其状态如何（您分配相应的节点属性除外）。

您可以将style 属性绑定到节点的hover 属性。

myButton.styleProperty().bind(Bindings.when(myButton.hoverProperty())
                                      .then("-fx-background-color: #101010")
                                      .otherwise("-fx-background-color: #aaaaaa"));

这可能会变得非常丑陋，例如想要以不同的方式设置焦点按钮和按下按钮的样式。出于这个原因，我建议结合 CSS 和内联 CSS 来实现所需的样式：

您可以在 CSS 中定义自己的变量颜色变量：

样式表

.label-button { /* using style class for selector (ids are for single nodes) */
    /* assign default values */
    -fx-normal-background: yellow;
    -fx-hovered-background: red;

    -fx-background-color: -fx-normal-background;
}

.label-button:hover {
    -fx-background-color: -fx-hovered-background;
}

java代码

myButton.setStyle("-fx-normal-background: #101010; -fx-hovered-background: #aaaaaa;");

【讨论】：