gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:10:58 26 4
gpt4 key购买 nike

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

我有一个用 FXML 定义的按钮,带有 style class button-red-bigid 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所示)和一个白色的图像。当按钮处于悬停状态时,它具有白色背景和红色图像。

图像是根据按钮的 idstyle 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");
}

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

最佳答案

您的选择器不正确。

#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 的节点>.

关于java - css 按钮图像未与 id 和样式类一起加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29234839/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com