Изображение кнопки css не загружается в сочетании с идентификатором и классом стиля

1

Я переношу свое приложение 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");
}

Надеюсь, мои объяснения немного ясны. Любые идеи, что может вызвать такое поведение?

  • 0
    Изменяется ли цвет текста при наведении?
  • 0
    Да все работает как и раньше кроме загрузки изображения
Показать ещё 3 комментария
Теги:
fxml
javafx-8

1 ответ

1
Лучший ответ

Ваш селектор неверен.

#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.

  • 0
    Ха, решение может быть таким простым, я убрал пробел между id и '.' и все снова заработало ... странно, что оно работало с пространством в Java 7 тыс. Большое спасибо James_D!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню