During my transition from Java 7 to Java 8, I've encountered a peculiar issue. Here's a brief explanation:
In my FXML file, I have a button defined with style class button-red-big and 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" />
Upon hovering over the red button, it changes to white due to the CSS code snippet below:
.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;
}
To enhance its appearance, I included an image on the button - a red image for hover state and a white image for normal state, handled through CSS based on the button's id and style class:
#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
}
While this setup functioned perfectly in Java 7, I'm facing challenges with the image loading in Java 8. Simply adding the -fx-background-image line directly within .button-big-red resolves the issue temporarily, but it's not an ideal solution given that I use different images for various buttons like so:
#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");
}
I hope this provides some clarity. Any insights into what might be causing this behavior?