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

Question

我创建了一个 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;
}

问题是当我将鼠标从菜单项上移开时，

it still stays blue and doesn't change back to white.

希望有设计JavaFX菜单知识和经验的人可以指导我实现结果。

Answer 1

这可能是因为现在还太早，无法理清思路，但我认为您的文件中有不必要的 CSS 规则。在任何情况下，请使用以下规则(除了您的规则之外):

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

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

我从你的 css 规则中留下了 -fx-padding。上面只是将每个菜单项的背景颜色设置为白色，并且在 :hover 规则上我将其设置回默认选择颜色 #039ED3 这与编写相同 -fx-focus -颜色。