java - css 按钮图像未与 id 和样式类一起加载

Question

我正在将我的 Java 7 应用程序迁移到 Java 8 并注意到一个奇怪的行为。简要说明:

我有一个用 FXML 定义的按钮，带有 style class button-red-big 和 id btnInput:

<Button id="btnInput" fx:id="btnInput" alignment="BOTTOM_RIGHT" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#handle_InputButton" prefHeight="100.0" prefWidth="100.0" styleClass="button-red-big" text="%experthome.button.input" textAlignment="CENTER" wrapText="true" />

当用户将鼠标移到红色按钮上时，它会变成白色。这是由 CSS 使用以下代码设置的:

.button-red-big {
    -fx-background-color: rgb(207,28,0);
    -fx-background-radius: 6, 5;
    -fx-background-insets: 0, 1;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: #ffffff;
    -fx-font-size: 10pt;
    -fx-font-weight: bold;
}

.button-red-big:hover {
    -fx-background-color: #ffffff;
    -fx-text-fill: rgb(207,28,0);
}

.button-red-big:pressed {
    -fx-padding: 10 15 13 15;
    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}

为了让它更漂亮，我在那个按钮上添加了一个图像。当按钮处于正常状态时，按钮有一个红色的背景(如上面的css所示)和一个白色的图像。当按钮处于悬停状态时，它具有白色背景和红色图像。

图像是根据按钮的 id 和 style class 由 css 应用的，如下所示:

#btnInput .button-red-big {
    -fx-background-image: url("/src/img/Input_w.png"); //white image
}

#btnInput .button-red-big:hover {
    -fx-background-image: url("/src/img/Input_r.png"); //red image
}

这曾经在 Java 7 中完美运行。但是，在 Java 8 中，图像没有被加载。现在，如果我直接在 .button-big-red 中添加 -fx-background-image 行，图像就会正常加载......但事实并非如此理想的解决方案，因为我有不同的图像(链接到红色按钮)，如下所示:

#btnAnalysis .button-red-big {
    -fx-background-image: url("/src/img/Analysis_w.png");
}

#btnAnalysis .button-red-big:hover {
    -fx-background-image: url("/src/img/Analysis_r.png");
}

#btnOutput .button-red-big {
    -fx-background-image: url("/src/img/Output_w.png");
}

#btnOutput .button-red-big:hover {
    -fx-background-image: url("/src/img/Output_r.png");
}

我希望我的解释有点清楚。有什么想法可能导致这种行为吗？

Answer 1

您的选择器不正确。

#btnAnalysis .button-red-big { ... }

将选择具有 css 类 button-red-big 的节点，这些节点是具有 id btnAnalysis 的节点的后代(在场景图中)。

你可能只想要

#btnAnalysis { ... }

选择具有 btnAnalysis id 的节点，或者

.button-red-big { ... }

选择样式类为 button-red-big 的节点，甚至是

#btnAnalysis.button-red-big { ... }

(注意没有空格)选择具有 both id btnAnalysis and 样式类 button-red-big 的节点>.