title: JavaFX TitledPane changed title background is reset on mouse entered
body: <p>I need to change the TitledPane title background based on some incoming value during runtime and reset it otherwise.</p>
  
  <p>All my TitledPane's is styled on a CSS attached to the Scene.</p>
  
  <p>Changing the background is no problem.
  The problem is when the mouse enters over the title after the background has been changed, the background is thus reset to the background from CSS.</p>
  
  <p><br>
  Test application for changing TitledPane title background:</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.scene.Node;
  import javafx.scene.Scene;
  import javafx.scene.control.TitledPane;
  import javafx.scene.control.ToggleButton;
  import javafx.scene.layout.Background;
  import javafx.scene.layout.BackgroundFill;
  import javafx.scene.layout.Region;
  import javafx.scene.layout.StackPane;
  import javafx.scene.paint.Color;
  import javafx.stage.Stage;
  
  public class TitledPaneApplication extends Application {
  
      public static void main(String[] args) {
          launch(args);
      }
  
      @Override
      public void start(Stage primaryStage) throws Exception {
          final StackPane root = new StackPane();
  
          final TitledPane titledPane = new TitledPane();
          titledPane.setText("Title");
          root.getChildren().add(titledPane);
  
          final String titleBackgroundValue = "#00ff11";
          final ToggleButton button = new ToggleButton("Change");
          button.setOnAction(event -&gt; {
              boolean selected = button.isSelected();
  
              final Node node = titledPane.lookup(".title");
              if (selected) {
                  final Color color = Color.valueOf(titleBackgroundValue);
                  ((Region) node).setBackground(new Background(new BackgroundFill(color, null, null)));
              } else {
                  ((Region) node).setBackground(null);
                  titledPane.applyCss();
              }
          });
  
          button.setSelected(false);
          titledPane.setContent(button);
  
          final Scene scene = new Scene(root, 400, 400);
          scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
          primaryStage.setScene(scene);
          primaryStage.setTitle("TestApplication");
          primaryStage.show();
      }
  
  }
  </code></pre>
  
  <p>The Scene CSS light.css</p>
  
  <pre><code>.root {
      -fx-base: rgb(240, 240, 240);
      -fx-background: rgb(240, 240, 240);
      -fx-border-color: rgb(220, 220, 220);
  
      /* make controls (buttons, thumb, etc.) slightly lighter */
      -fx-color: derive(-fx-base, 10%);
  
      /* text fields and table rows background */
      -fx-control-inner-background: rgb(248, 248, 248);
      /* version of -fx-control-inner-background for alternative rows */
      -fx-control-inner-background-alt: derive(-fx-control-inner-background, -2.5%);
  
      /* text colors depending on background's brightness */
      -fx-light-text-color: rgb(220, 220, 220);
      -fx-mid-text-color: rgb(100, 100, 100);
      -fx-dark-text-color: rgb(20, 20, 20);
  
      /* A bright blue for highlighting/accenting objects.  For example: selected
       * text; selected items in menus, lists, trees, and tables; progress bars */
      -fx-accent: rgb(0, 80, 100);
  
      /* color of non-focused yet selected elements */
      -fx-selection-bar-non-focused: rgb(50, 50, 50);
  
      -fx-font-family: "Roboto"; /* "Segoe UI Semibold", "Roboto", "Monospaced" */
      -fx-font-size: 1em;
  
      -primary-border-color: rgb(220, 220, 220);
  }
  
  /* Fix derived prompt color for text fields */
  .text-input {
      -fx-prompt-text-fill: derive(-fx-control-inner-background, -50%);
  }
  
  /* Keep prompt invisible when focused (above color fix overrides it) */
  .text-input:focused {
      -fx-prompt-text-fill: transparent;
  }
  
  /* Fix scroll bar buttons arrows colors */
  .scroll-bar &gt; .increment-button &gt; .increment-arrow,
  .scroll-bar &gt; .decrement-button &gt; .decrement-arrow {
      -fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
  }
  
  .scroll-bar &gt; .increment-button:hover &gt; .increment-arrow,
  .scroll-bar &gt; .decrement-button:hover &gt; .decrement-arrow {
      -fx-background-color: -fx-mark-highlight-color, rgb(240, 240, 240);
  }
  
  .scroll-bar &gt; .increment-button:pressed &gt; .increment-arrow,
  .scroll-bar &gt; .decrement-button:pressed &gt; .decrement-arrow {
      -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
  }
  
  .text-field {
      -fx-font-size: 10pt;
  }
  
  .combo-box {
      -fx-font-size: 10pt;
  }
  
  /* ScrollPane style. */
  .scroll-pane {
      -fx-background-color: transparent;
  }
  
  .scroll-pane &gt; .viewport {
      -fx-background-color: transparent;
  }
  
  /* TabPane style. */
  .tab-pane &gt; .tab-header-area {
      -fx-background-color: transparent;
  }
  
  /* TitledPane style. */
  .titled-pane {
      -fx-border-width: 1;
      -fx-border-color: -primary-border-color;
      -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.15), 5, 0.0, 0, 1);
  }
  
  .titled-pane &gt; .content {
      -fx-border-width: 0;
  }
  
  .titled-pane .title .arrow-button {
      visibility: false;
  }
  
  .titled-pane &gt; .title {
      -fx-background-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;
  }
  
  .titled-pane &gt; .title .text {
      -fx-font-size: 10pt;
  }
  </code></pre>