2016-09-04 4 views
0

Задача:
.menu:focused и .menu:hover оба не работают в моем меню, когда парят дети. Как вы можете видеть на этом простом снимке, верхняя категория возвращается к голубым по умолчанию, когда я останавливаюсь над ней.CSS JavaFX MenuItem Focus Parent

Структура

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> 

ответ

1

showing pseudoclass могут быть использованы для этой цели (см 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; 
} 
+0

Это было чрезвычайно ценным ответом на меня. Не только потому, что он полностью ответил на вопрос, но документацию и этот классный трюк для css. – IdiotDrake

0

пытаются использовать это:

.menu-item .label { 
    -fx-text-fill: white; 
} 

.menu-item:focused { 
    -fx-background-color: #00b6ff; 
} 


.menu-item:focused .label { 
    -fx-text-fill: white; 
}