JAVAFX How to make a button stacked behind a Label clickable

Question

How to make a button stacked behind a Label clickable?

Button

Button btn = new Button();
//TODO: button's main function, like onPressed, onReleased etc. here...

Custom label

CustomLabel sp = new CustomLabel("Some texts here"));
//TODO: custom label's main function, like a translucent background etc here...
//main purpose of this is to overlay the button

Main Pane

StackPane mainPane = new StackPane();
mainPane.getChildren.addAll(btn, sp);

With this, the area which the custom label overlays becomes unclickable.

Is there anyway to make the button still clickable even though overlay-ed, for example? Or is there another way to do it? Something like setting label to not visible on click?

---

EDIT : To answer Itamar Green 's question..

By using the example as shown in this link: Mouse Events get Ignored on the Underlying Layer , it still does not seems to work. The button stacked under the layer is still not clickable.

sp.setPickOnBounds(false);

Answer 1

You can set the mouseTransparent property of the element(s) drawn on top to true. Note that this way all descendants of the node are ignored for mouse events:

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("Say 'Hello World'");
    btn.setOnAction((ActionEvent event) -> {
        System.out.println("Hello World!");
    });
    Region region = new Region();
    region.setStyle("-fx-background-color: #0000ff88;");
    region.setMouseTransparent(true);

    StackPane root = new StackPane(btn, region);

    Scene scene = new Scene(root, 100, 100);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Comment out

region.setMouseTransparent(true);

and the button will no longer react to mouse events in any way...