JavaFX TitledPane remove mouse hover

KunLun :

I have this code:

public static void main(String[] ar){

    launch(ar);

}

@Override
public void start(Stage primaryStage){

    TitledPane titledPane = new TitledPane("", null);
    titledPane.setCollapsible(false);
    titledPane.setContent(new javafx.scene.control.TextArea("George"));

    Platform.runLater(() -> {

        titledPane.lookup(".title").setStyle("-fx-background-color: rgba(255, 255, 255, 1);" +
                "-fx-border-style: solid;" +
                "-fx-border-color: rgba(0, 0, 0, 1);" +
                "-fx-border-width: 1px;");

        titledPane.lookup(".content").setStyle("-fx-background-color: rgba(255, 255, 255, 1);" +
                "-fx-border-style: solid;" +
                "-fx-border-color: rgba(0, 0, 0, 1);" +
                "-fx-border-width: 1px;");

    });

    HBox hBox = new HBox();
    hBox.setAlignment(Pos.CENTER);

    Text textTitle = new Text("CONSOLE");
    Button buttonClear = new Button("CLEAR");

    HBox.setMargin(textTitle, new Insets(0, 10, 0, 0));

    hBox.getChildren().addAll(textTitle, buttonClear);

    titledPane.setGraphic(hBox);

    primaryStage.setScene(new Scene(titledPane));
    primaryStage.show();

}

If I place mouse in zone with red line, it trigger mouseover effect of button clear.

How to stop to trigger mouseover effect of button if I'm not with mouse on it?

Slaw :

When the title is hovered over, modena.css changes a named color's value to give it the hover style; specifically, it changes -fx-color. This appears to have the side-effect of making the Button change to its hover style as well. I expect this could be considered a bug.

To work around this problem, apply the following CSS (selectors assume the Button is the graphic):

.titled-pane > .title:hover > .button {
    -fx-color: -fx-base;
}

.titled-pane > .title:hover > .button:hover {
    -fx-color: -fx-hover-base;
}

.titled-pane > .title:hover > .button:armed {
    -fx-color: -fx-pressed-base;
}

The above will make the Button keep its default styling. You can obviously style the Button your own way using the same selectors.

Since you need to target pseudo classes it will be easier to have the CSS in an external file, rather than setting the styles inline with setStyle. To keep the look you have, you can use the following stylesheet (includes the above):

.titled-pane {
    -fx-collapsible: false;
    -fx-content-display: right;
    -fx-graphic-text-gap: 10px;
}

.titled-pane > .title,
.titled-pane > .content {
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

.titled-pane > .title:hover > .button {
    -fx-color: -fx-base;
}

.titled-pane > .title:hover > .button:hover {
    -fx-color: -fx-hover-base;
}

.titled-pane > .title:hover > .button:armed {
    -fx-color: -fx-pressed-base;
}

And here's an example using this CSS:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TitledPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        var pane = new TitledPane("CONSOLE", new TextArea("This is the console output."));
        pane.setGraphic(new Button("CLEAR"));

        var scene = new Scene(pane, 600, 400);
        scene.getStylesheets().add("Main.css"); // replace with your resource

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

}

JavaFX TitledPane remove mouse hover

Guess you like