JavaFX CSS : Apply hover effect to Child nodes when Parent node is hovered on

Question

Is it possible to apply the the hover effects a node's children, when parent node is hovered on, without having to hove over each child itself for its hover effect to take place?

For example, suppose i have the following node:

• HBox --> #parent
  • Label --> #label
  • Button --> #button

I want to be able to trigger the hover pseudo class of the button and the label, when the Hbox is hovered on.

Answer 1

There is no way to do this in JavaFX 2 (using the public API) since it does not provide access to pseudoclasses. Even with JavaFX 8+ I would not recommend doing it this way since this would interfere with a pseudoclass that is managed by JavaFX.

You could however apply CSS rules based on the parent's hover state from a CSS stylesheet to make them look the same as a hovered node. The following CSS assumes you add the hover-container style class to the parent:

/* a button in a hovered container should look the same as a hovered button */
.hover-container:hover .button {
    -fx-color: -fx-hover-base;
}

/* override above rule for armed buttons */
.hover-container:hover .button:armed {
    -fx-color: -fx-pressed-base;
}