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

时间:2016-03-22 16:22:11

标签: css javafx styles stylesheet

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

我可以做那样的事情

pane.setStyle("");

但是我希望我的css代码在css样式表中,我想知道是否可以创建像togglebutton这样的东西

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

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

因此,每次选择我的togglebutton时,样式都会自动更改。

问题是:是否可以创建一个像togglebutton一样的参数。类似的东西:

css stylesheet

.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);
}

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

1 个答案:

答案 0 :(得分:1)

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

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

一般情况下,虽然在这种情况下不需要,但您可以定义任意CSS伪类(它将像selectedhover一样工作)。例如,要重现悬停功能,您可以执行以下操作:

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的字符串标识符