Css 鼠标离开菜单项后，如何在JavaFX中重置菜单项悬停颜色？

我创建了一个Java FXML文件，并包括Css样式，以创建一个窗口，如下所示：

这是我的CSS样式表

.button {
-fx-background-color:transparent;
-fx-background-radius:0;
-fx-border-color:transparent;
-fx-border-width:0;
}

.button:focused {
-fx-background:transparent;
-fx-background-radius:0;
-fx-border-color:transparent;
-fx-border-width:0;
}

.button:hover {
-fx-background-color:transparent, red ,red, red;
-fx-background-radius:0;
-fx-border-width:0;
}

.button:pressed {
-fx-background-color:#DD2C00;
}

.menu {
-fx-padding:1 10 1 5;
}

.menu .context-menu {
-fx-padding:1 1 1 1;
}

.menu-bar {
-fx-background-color:#212121;
-fx-padding:0 1 0 1;
-fx-spacing:1;
}

.menu-bar .label {
-fx-padding:0 10 0 10;
}

.menu-bar > .container > .menu-button {
-fx-background-color:#212121;
-fx-padding:5 5 5 5;
}

.menu-bar > .container > .menu-button > .label {
-fx-text-fill:#E0E0E0;
}

.menu-bar > .container > .menu-button > .label:disabled,.menu-item .label:disabled {
-fx-opacity:1.0;
}

.menu-bar > .container > .menu-button:hover > .label,.menu-bar > .container > .menu-button:focused > .label {
-fx-text-fill:#FFF;
}

.menu-bar > .container > .menu-button:hover,.menu-bar > .container > .menu-button:focused {
-fx-background-color:#424242;
}

.menu-bar > .container > .menu-button:showing > .label,.menu-item .label {
-fx-text-fill:#000;
}

.menu-bar > .container > .menu-button:showing,.context-menu {
-fx-background-color:#FFF;
}

.menu-item {
-fx-background-color:#FFF;
-fx-padding:5 20 5 20;
}

.menu-item:focused .label,.menu-item:hovered .label {
-fx-text-fill:#EaE3EA;
}

.menu-item:focused,.menu-item:hovered {
-fx-background-color:#1565C0;
}
.menu-item:left {
    -fx-background-color: #FFF;
}
.root {
-fx-font-family:"Segoe UI";
-fx-font-weight:bold;
-fx-smooth:true;
}

问题是当我离开菜单项时

它仍然保持蓝色，不会变回白色

---

希望具有JavaFX菜单设计知识和经验的人能指导我实现这一目标。

可能是因为现在想清楚还为时过早，但我认为您的文件中有不必要的CSS规则。在任何情况下，使用以下规则（除您的规则外）：

我留下了css规则中的

-fx padding

。以上只是将每个菜单项的背景色设置为白色并启用：悬停规则我将其设置回默认选择颜色

#039ED3

，这与写入

-fx焦点颜色

相同

.menu-item {
   -fx-background-color: white;
   -fx-padding: 5 20 5 20;
}

.menu-item:hover {
    -fx-background-color: -fx-focus-color;
}