java - CSS JavaFX 菜单项焦点父级

Question

问题:
.menu:focused 和 .menu:hover 在我的菜单栏中悬停 child 时都让我失望。 正如您在这张简单的图片中看到的，当我停止将鼠标悬停在顶部类别上时，它会恢复默认的蓝色。

结构是

menubar > menu > menu-item

正如您在此处的 fxml 和 css 中看到的那样

#MasterMenuBar{
    -fx-background-color: #e1dbc4;
    -fx-text-fill: #4a4b43;
}
.menu:hover{
    -fx-background-color: #878658;
}
.menu-item:focused{
     -fx-background-color: #878658;
}

<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane fx:id="MasterBorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@MasterWindowStyle.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.MasterController">
   <top>
      <VBox fx:id="MasterTitleVBox" BorderPane.alignment="CENTER">
         <children>
            <Label fx:id="MasterLabel" text="Master">
               <font>
                  <Font name="Gabriola" size="36.0" />
               </font>
               <padding>
                  <Insets left="20.0" />
               </padding>
            </Label>
            <Label id="ProjectChoiceLabel" fx:id="MasterProjectChoiceLabel" text="Chose A Project">
               <font>
                  <Font name="Gabriola" size="18.0" />
               </font>
               <padding>
                  <Insets left="50.0" />
               </padding>
            </Label>
            <MenuBar fx:id="MasterMenuBar">
              <menus>
                <Menu fx:id="MasterMenu285" mnemonicParsing="false" text="CSC285">
                     <items>
                        <Menu fx:id="HomeworkMenu285" mnemonicParsing="false" text="Homework">
                          <items>
                            <MenuItem id="HomeworkMenu1" fx:id="HomeworkMenu285Item1" mnemonicParsing="false" onAction="#Homework01Click" text="Homework_01" />
                          </items>
                        </Menu>
                     </items>
                </Menu>
                <Menu fx:id="MasterMenu406" mnemonicParsing="false" text="CSC406">
                  <items>
                        <Menu fx:id="ThreadPracticeMenu406" mnemonicParsing="false" text="Thread Practice">
                          <items>
                            <MenuItem id="ThreadPracticeMenu01" fx:id="ThreadPractice406Item1" mnemonicParsing="false" text="ThreadPractice_01" />
                          </items>
                        </Menu>
                  </items>
                </Menu>
              </menus>
            </MenuBar>
         </children>
      </VBox>
   </top>
   <center>
      <StackPane id="MasterContentPane" fx:id="MasterContentPane" BorderPane.alignment="CENTER">
         <BorderPane.margin>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
         </BorderPane.margin></StackPane>
   </center>
</BorderPane>

Answer 1

showing 伪类可用于此目的(参见 CSS Reference for Menu ):

#MasterMenuBar {
    -fx-background-color: #e1dbc4;
    -fx-text-fill: #4a4b43;
}

.menu:hover,
.menu:showing, /* selects Menu in MenuBar, if shown */
.menu-item:focused {
    -fx-background-color: #878658;
}