Question

我正在将Java 7应用程序迁移到Java 8，并注意到一种奇怪的行为。简而言之：

我在FXML中定义了一个带有样式类 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所示）和白色图像。当按钮处于悬停状态时，它具有白色背景和红色图像。

图片由css根据 id 和按钮的样式类应用，如下所示：

#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中，图像没有被加载。现在，如果我在-fx-background-image中直接添加.button-big-red行，图像会正常加载......但这不是理想的解决方案，因为我有不同的图像（链接到红色按钮），就像这样：

#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的节点，这些节点是标识为btnAnalysis的节点的后代（在场景图中）。

你可能只想

#btnAnalysis { ... }

选择btnAnalysis id或

的节点

.button-red-big { ... }

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

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

（请注意没有空格）选择标识btnAnalysis 和样式类button-red-big的节点。

css按钮图像不与id和样式类组合加载

1 个答案: