Add action to GridPane in scene builder

Question

I have a image_1, Title_1 and details_1, in a GridPane_1 as one,(see the picture). I want to add an event to the GridPane_1 so if you enter the mouse to the GridPane_1 becomes a gray color background(for example), to denote the selection of the image_1, Title_1 and details_1 one thing as one button so if you press it takes it to the window_1, the same for the remaining (GridPane_2 (image_2, Title_2 and details_2) --- window_2) (GridPane_3 (image_3, Title_3 and details_3) --- window_3) (GridPane_4 (image_4, Title_4 and details_4) --- window_4)

Answer 1

You can give a style class to all four children gridpanes . In SceneBuilder there is a css javafx menu under inspector>>properties . In this case "gridpane" .

Now you need to attach this css file to the tab preview>>Scene Style Sheets >>Add Style Sheet I've named it main.css , but you can name it whatever you want .

main.css file :

 .gridpane:hover {

-fx-background-color : blue;
}

Now hover is a pseudoclass that apply its rules only when the mouse is over the node . In this case it will change background color to blue . You can see it in scenebuilder in preview>> Show Preview in Window.

Css has been applied in sceneBuilder only . If you want to set this style in the actual app follow How to style the GridPane using CSS in JavaFx