Я переношу свое приложение Java 7 на Java 8 и замечаю странное поведение. Объяснение вкратце:
У меня есть кнопка, определенная в FXML с button-red-big
стиля стиля 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 на основе идентификатора и стиля стиля кнопки следующим образом:
#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");
}
Надеюсь, мои объяснения немного ясны. Любые идеи, что может вызвать такое поведение?
Ваш селектор неверен.
#btnAnalysis .button-red-big { ... }
будут выбирать узлы с помощью button-red-big
css button-red-big
которые являются потомками (в графе сцены) узлов с идентификатором btnAnalysis
.
Вы, вероятно, хотите просто
#btnAnalysis { ... }
который выбирает узел с идентификатором btnAnalysis
, или
.button-red-big { ... }
который выбирает узлы со стилем стиля button-red-big
или даже
#btnAnalysis.button-red-big { ... }
(обратите внимание на пробел), который выбирает узлы с идентификатором id btnAnalysis
и button-red-big
стиля style button-red-big
.