Css JavaFX-根据切换状态在切换按钮上设置不同的悬停颜色_Css_Javafx_Togglebutton

Css JavaFX-根据切换状态在切换按钮上设置不同的悬停颜色

css javafx

Css JavaFX-根据切换状态在切换按钮上设置不同的悬停颜色,css,javafx,togglebutton,Css,Javafx,Togglebutton,我的程序中有一个启动/停止脚本的切换按钮。我想这个按钮是绿色的，并说“开始”时，按钮没有被选中，红色，并说“停止”时，它被选中。更重要的是，我希望未选择的悬停颜色是原始绿色的稍深版本，而选择的悬停颜色是红色的稍深版本。此按钮的当前CSS如下所示： #startStopButton { -fx-border-color:#d4d4d4; -fx-background-color:#85eca5; -fx-background-image: url("startButton.

我的程序中有一个启动/停止脚本的切换按钮。我想这个按钮是绿色的，并说“开始”时，按钮没有被选中，红色，并说“停止”时，它被选中。更重要的是，我希望未选择的悬停颜色是原始绿色的稍深版本，而选择的悬停颜色是红色的稍深版本。此按钮的当前CSS如下所示：

#startStopButton {
    -fx-border-color:#d4d4d4;
    -fx-background-color:#85eca5;
    -fx-background-image: url("startButton.png");
    -fx-background-size: 50px;
    -fx-background-repeat: no-repeat;  
    -fx-background-position: 80% 50%;
    -fx-alignment: CENTER_LEFT; 
    -fx-effect: dropshadow(three-pass-box, #e7e7e7, 15, 0, 0, 0);
}

#startStopButton:hover {
    -fx-background-color:#80dc9c;
}


#startStopButton:selected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}
#startStopButton:selected:focused{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

#startStopButton:unselected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

目前，除按钮变为红色外，该功能正常工作。在这种情况下，没有悬停效果。在我的FXML控制器中，每次单击此按钮时都会激活一个功能：

private void startStopClick()
{
    if(startStopButton.isSelected())
    {
    startStopButton.setText("      STOP");
   // startStopButton.setStyle()
    }
    else {
        startStopButton.setText("     START");
    }
}

有没有办法1）在CSS中设置按钮文本，这样我就可以将其从控制器中删除？ 2）获取CSS中当前的切换按钮状态，这样我就可以有多个悬停效果。例如，类似这样的内容：

#startStopButton {
    -fx-border-color:#d4d4d4;
    -fx-background-color:#85eca5;
    -fx-background-image: url("startButton.png");
    -fx-background-size: 50px;
    -fx-background-repeat: no-repeat;  
    -fx-background-position: 80% 50%;
    -fx-alignment: CENTER_LEFT; 
    -fx-effect: dropshadow(three-pass-box, #e7e7e7, 15, 0, 0, 0);
}

#startStopButton:hover {
    -fx-background-color:#80dc9c;
}


#startStopButton:selected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}
#startStopButton:selected:focused{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

#startStopButton:unselected{
    -fx-background-color: #ff6060;
    -fx-text:"STOP";
}

如果在CSS中无法做到这一点，我可以在FXML控制器的Java代码中设置悬停样式吗？

CSS属性仅适用于节点外观。除了少数例外，基本JavaFX节点不允许您通过CSS指定内容。按钮的

文本

属性也不例外；不能使用CSS设置它

至于颜色：最后出现的规则覆盖了规则指定的值，这些值之前的优先级相同。这意味着由

#startStopButton:selected

和

#startStopButton:selected:focused

规则指定的背景色始终覆盖

#startStopButton:hover

指定的颜色

由于在这两种情况下，您都希望在悬停时使用较深的颜色，因此

派生

函数和lookedup颜色可能适合您

例子样式表

.start-stop.toggle-button{
基色：#85eca5；
-背景色：底色；
}
.开始-停止。切换按钮：选中{
基色：#ff6060；
}
.开始-停止。切换按钮：悬停{
-fx背景色：衍生（基色，-20%）；
}

如果由于需要为所有4个状态指定不同的颜色，因此无法使用

derivate

，则仍然可以依赖查找的颜色，以避免依赖规则排序：

.start-stop.toggle-button{
未选择的颜色：蓝色；
所选颜色：黄色；
-fx背景色：未选择的颜色；
}
.开始-停止。切换按钮：悬停{
未选择的颜色：红色；
所选颜色：绿色；
}
.开始-停止。切换按钮：选中{
-fx背景色：所选颜色；
}