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

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.

1 answer

  • answered 2018-01-14 14:14 fabian

    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;
    }