javafx：在窗格上动态更改样式

Question

我正在尝试在鼠标经过窗格时更改窗格的样式，并在鼠标位于窗格外时将其更改回正常样式。

我可以做这样的事情

pane.setStyle("");

但是我希望我的 css 代码在 css 样式表中，我想知道是否可以创建类似 togglebutton

的东西

.togglebutton{
     -fx-background-color:red;
}

.togglebutton:selected{
     -fx-background-color:green;
}

因此，每次我 select 我的切换按钮时，样式都会自动更改。

问题是：是否可以创建一个参数来充当切换按钮。类似于：

css 样式表

.mypane{
     //do something
}

.mypane:selected{
     // do something else
}

java代码

public void mousedragAction(MouseEvent event){
     mypane.isSelected(true);
}

public void mouseexit(MouseEvent event){
     mypane.isSelected(false);
}

非常感谢您提供任何帮助或任何其他解决方案。

Answer 1

您正在寻找的功能已通过 hover pseudoclass 实现。所以你可以做

.myPane {
    /* do something */
}
.myPane:hover {
    /* do something else */
}

一般来说，虽然在这种情况下没有必要，但您可以定义任意 CSS 伪类（其工作方式类似于 selected 和 hover）。例如，要重现悬停功能，您可以执行以下操作：

PseudoClass moveOver = PseudoClass.getPseudoClass("mouse-over");
Pane myPane = new Pane();
myPane.getStyleClass().add("my-pane");
myPane.setOnMouseEntered(e -> myPane.pseudoClassStateChanged(mouseOver, true));
myPane.setOnMouseExited(e -> myPane.pseudoClassStateChanged(mouseOver, false));

然后你可以使用下面的CSS:

.my-pane {
    -fx-background-color: white ;
}
.my-pane:mouse-over {
    -fx-background-color: yellow ;
}

注意CSS中的伪类名（:mouse-over）匹配传递给getPseudoClass方法的字符串（PseudoClass.getPseudoClass("mouse-over")），可以是任何字符串可用作 CSS 标识符。

javafx：在窗格上动态更改样式

javafx: change style dynamically on pane

css

styles

javafx

stylesheet