JavaFX 内联 CSS 悬停效果

Question

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

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

这非常酷，我经常使用它。

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

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

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

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

但是我找不到合适的语法，更不用说有语法了。如果没有这个功能，我应该怎么做呢？谢谢!

Answer 1

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

您可以将 style 属性绑定(bind)到节点的 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;");