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

首先得明确一点：JavaFX里的伪类（比如:hover）会在鼠标离开控件时自动失效，控件应该回到默认样式。如果你的菜单项没自动重置颜色，大概率是默认状态的样式没定义清楚，或者样式优先级出了问题。

针对你用Button作为菜单项的情况 #

先补全并优化你的CSS代码，确保默认状态、悬停状态、按下状态都清晰定义：

/* 按钮默认状态 - 鼠标离开后回到这个样式 */
.button {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-border-color: transparent;
    -fx-border-width: 0;
}

/* 聚焦状态保持透明 */
.button:focused {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-border-color: transparent;
    -fx-border-width: 0;
}

/* 鼠标悬停时的红色背景 */
.button:hover {
    -fx-background-color: red; /* 简化了你原来的多层背景写法，若需要渐变可保留原写法 */
    -fx-background-radius: 0;
    -fx-border-width: 0;
}

/* 按钮按下时的深色背景 */
.button:pressed {
    -fx-background-color: darkred;
    -fx-background-radius: 0;
    -fx-border-width: 0;
}

如果你用的是JavaFX原生MenuItem（MenuBar里的菜单项） #

那得用.menu-item相关选择器，而不是.button，代码示例：

/* 菜单项默认状态 */
.menu-item {
    -fx-background-color: transparent;
}

/* 鼠标悬停时的红色背景 */
.menu-item:hover {
    -fx-background-color: red;
}

/* 菜单项按下状态 */
.menu-item:pressed {
    -fx-background-color: darkred;
}

/* 可选：调整菜单项文字颜色 */
.menu-item .label {
    -fx-text-fill: black;
}

排查小技巧 #

如果还是没生效，检查这几点：

• 有没有更具体的选择器（比如带ID的#myButton）覆盖了你的通用.button样式？优先级高的样式会生效
• 是不是手动在代码里添加了:hover伪类但没移除？如果是自定义鼠标事件处理，要在mouseExited事件里调用button.pseudoClassStateChanged(Hovered.HOVERED, false);
• 确认CSS文件已经正确加载到你的FXML场景中

内容的提问来源于stack exchange，提问作者Midhun Monachan