Question

我是JavaFX和CSS Styling的新手，并且刚刚对完成以下操作的最佳方法做了一些澄清。

基本上，我有两个按钮，我实现了Hover和Focus，因此边框颜色在Hover（鼠标）和Focused（键盘选项卡）上都会发生变化。目前我有以下内容：

.normalbutton:hover {

    -fx-font-size: 11pt;
    -fx-font-family: "Verdana";
    -fx-font-weight : Normal;

    -fx-background-color : #545454;

    -fx-border-color: #FFFFFF ;
    -fx-border-radius: 3,3,3,3;
    -fx-border-width: 1px ;

}

.normalbutton:focused {

     -fx-font-size: 11pt;
     -fx-font-family: "Verdana";
     -fx-font-weight : Normal;

     -fx-background-color : #545454;

     -fx-border-color: #FFFFFF ;
     -fx-border-radius: 3,3,3,3;
     -fx-border-width: 1px ;

}

它工作正常，但我想知道是否有一种方法可以将聚焦和悬停结合起来，因为它们具有相同的属性。

Answer 1

CSS中的,可以分隔多个选择器。如果其中一个匹配，则应用样式。在您的示例中，它看起来像这样：

.normalbutton:hover,
.normalbutton:focused {

     -fx-font-size: 11pt;
     -fx-font-family: "Verdana";
     -fx-font-weight : Normal;

     -fx-background-color : #545454;

     -fx-border-color: #FFFFFF ;
     -fx-border-radius: 3,3,3,3;
     -fx-border-width: 1px ;

}

https://www.w3.org/TR/CSS21/selector.html#grouping

Jafa FX CSS重复

1 个答案: