JavaFX TitledPane changed title background is reset on mouse entered

Setting inline CSS styling takes the priority over from the styles in css file. So applying the background through setStyle will do the trick.

button.setOnAction(event -> {
            final Node node = titledPane.lookup(".title");
            if (button.isSelected()) {
                node.setStyle("-fx-background-color:#00ff11;");
            } else {
                node.setStyle(null);
            }
        });

UPDATE: However, a bit more details on the actual problem. To understand this, you need to first know how the background of .title is defined internally and how the hover styling is set.

Internally in Modena.css below are the styling for the background of .title:

.titled-pane > .title {
    -fx-background-color:
        linear-gradient(to bottom,
            derive(-fx-color,-15%) 95%,
            derive(-fx-color,-25%) 100%
        ),
        -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
    -fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
}

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

If you notice the actual background is derived from -fx-color, -fx-inner-border & -fx-body-color. However -fx-inner-border & -fx-body-color are indeed again derived from -fx-color only.

-fx-inner-border: linear-gradient(to bottom,
                ladder(
                    -fx-color,
                    derive(-fx-color,30%) 0%,
                    derive(-fx-color,20%) 40%,
                    derive(-fx-color,25%) 60%,
                    derive(-fx-color,55%) 80%,
                    derive(-fx-color,55%) 90%,
                    derive(-fx-color,75%) 100%
                ),
                ladder(
                    -fx-color,
                    derive(-fx-color,20%) 0%,
                    derive(-fx-color,10%) 20%,
                    derive(-fx-color,5%) 40%,
                    derive(-fx-color,-2%) 60%,
                    derive(-fx-color,-5%) 100%
                ));
                
-fx-body-color: linear-gradient(to bottom,
            ladder(
                -fx-color,
                derive(-fx-color,8%) 75%,
                derive(-fx-color,10%) 80%
            ),
            derive(-fx-color,-8%));
    

In the :hover pseudo state, the -fx-color is changed to -fx-hover-base and the background is updated accordingly. There lies your problem. You are setting only the default background programatically. On mouse over the .title, it still picks the internally CSS file styling (as you have not defined your custom one for hover).

If we manage to update the -fx-color attribute, then it will take care of the corresponding css updates for different pseudo states.

A more correct approach for your requirement will be as below: this way you can still get the nice gradient features of title which are internally defined.

button.setOnAction(event -> {
            final Node node = titledPane.lookup(".title");
            if (button.isSelected()) {
                node.setStyle("-fx-color:#00ff11;");
            } else {
                node.setStyle(null);
            }
        });
    
// In css file  
.titled-pane > .title {
    -fx-color: -primary-border-color;
    -fx-background-insets: 0;
    -fx-background-radius: 0 0 0 0;
    -fx-padding: 0.2em 0.2em 0.2em 0.2em;
}

UPDATE 2:

Please find below an example for TitledPane inside another TitledPane.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.Set;

public class TitledPaneApplication extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        final VBox root = new VBox();
        root.setSpacing(10);

        final TitledPane titledPane = new TitledPane();
        titledPane.setText("Title");

        final String titleBackgroundValue = "#00ff11";
        final ToggleButton button = new ToggleButton("Change");
        button.setOnAction(event -> {
            final Set<Node> node = titledPane.lookupAll(".title");
            if (button.isSelected()) {
                node.forEach(n->n.setStyle("-fx-color:#00ff11;"));
            } else {
                node.forEach(n->n.setStyle(null));
            }
        });
        button.setSelected(false);

        VBox inner = new VBox();
        inner.setSpacing(10);
        inner.setPadding(new Insets(10));
        final TitledPane innerTP = new TitledPane();
        innerTP.setText("Inner Title");
        inner.getChildren().addAll(new Label("Inner"),innerTP);
        innerTP.setContent(new Button("Dummy Button"));

        titledPane.setContent(inner);

        root.getChildren().addAll(button,titledPane);
        final Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setTitle("TestApplication");
        primaryStage.show();
    }
}