JavaFX内联CSS悬停效果

时间:2018-06-16 04:59:37

标签: java css user-interface javafx

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

tempNum

非常酷,我经常使用它。

但是有我的问题:似乎这对悬停效果不起作用。 在外部CSS文件中,您可以:

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

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

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

但是我找不到合适的语法,更不用说有语法了。 如果没有这样的功能,我该怎么办呢? 谢谢!

1 个答案:

答案 0 :(得分:2)

无法在内联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;");