How to affect other elements on hover in JavaFX Scene Builder? - css

Question

I am working on an app in JavaFX using SceneBuilder, and I want to add an CSS code that will display label when I hover on a button, I tried:
.label
{
-fx-text-fill: transparent;
}
.button:hover ~ .label
{
-fx-text-fill: black;
}
All the elements are in the same container.
So my question is how can I affect label using button?

Answer 1

You will not be able to do this purely with JavaFX CSS since the Label is not a descendant of the button.
You can, however, alter the style of the Label by listening to the hoverProperty of your Button and setting the style for the Label appropriately:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Sample extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
// Sample layout
VBox root = new VBox(5);
root.setAlignment(Pos.TOP_CENTER);
root.setPadding(new Insets(5));
// Create the Button and Label
Button button = new Button("Hover Me!");
Label label = new Label("You hovered like a pro!");
// Add a listener to the button's hoverProperty. When it is triggered, we can update the
// styleclass of the label.
button.hoverProperty().addListener((observable, oldValue, newValue) -> {
// If the current state is true, add the button-hovered styleclass
if (newValue) {
label.getStyleClass().add("button-hovered");
} else {
// Otherwise, we remove that class
label.getStyleClass().remove("button-hovered");
}
});
// Add the button and label to the layout
root.getChildren().addAll(button, label);
// Create the scene
Scene scene = new Scene(root);
// Apply CSS
scene.getStylesheets().add("css/style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
}
HOWEVER, in your case, you may be going about it the wrong way since you just want to keep the Label hidden until the user hovers over the Button. In that case, it is probably simpler to just bind the visibleProperty of the Label to your hoverProperty of the Button. Doing so takes just one line of code instead of using the listener:
label.visibleProperty().bind(button.hoverProperty());
Of course, you'll want to remove the .label selector from your CSS if you go this route, since it will still make the text transparent.