1

所以我有一个很奇怪的小问题。我已经为我的未装饰应用程序的菜单和菜单栏设置了样式。如果我将菜单项悬停在上下文菜单中，菜单会将其背景颜色更改为默认的窗口之一。

场景图片（在第二张图片中，我将鼠标悬停在“模型”菜单项上）： 在这里，我悬停了一个正在发挥作用的菜单。

如果我将鼠标悬停在我的菜单项之一，它的背景菜单会跳到蓝色。

如果我没有用鼠标站在菜单项上，菜单项也会有蓝色背景。

有谁知道如何修复蓝色背景？我希望菜单有我的悬停背景，就像第一张图片一样。并且菜单项也应该有自己的背景，如果我没有鼠标放在它上面，它不会跳到蓝色。

CSS：

.menu-bar {
    -fx-background-color: transparent;
}
.menu {
    -fx-label-padding: 3px;
}
.menu .label, .menu-item .label {
    -fx-text-fill: #eee;
}
.menu:hover, .menu:focused, .menu:pressed {
    -fx-background-color: rgba(0, 0, 0, 0.2);
}
.menu-item:hover {
    -fx-background-color: rgba(0, 0, 0, 0.4);
}
.context-menu {
    -fx-background-color: rgba(0, 0, 0, 0.3);
}

先感谢您。

4

3 回答 3

3

将此添加到您的CSS

.menu-item:focused {
   -fx-background-color : <preferred color>;
}
于 2016-08-11T23:11:53.363 回答
3

您正在向.menu和中添加冗余的属性层menu-item。试图只照顾有关的财产。例如，在您的情况下，无论是在事件中还是在事件中menu，都需要遵循您的着色模式。所以添加hoveredshowing

.menu:hover, .menu:showing{
  -fx-background-color: <preferred backgound>;
}

同样只添加focused属性到，因为它共享背景menu-item的其余部分context-menu

.menu-item:focused{
  -fx-background-color: <preferred background>;
}

查看简单演示的快照：

在此处输入图像描述

于 2016-08-29T15:38:32.830 回答
0

您可以使用

.menu {
    -fx-background-color: #FFFFFF;
}

.menu .label {
    -fx-text-fill: black;
    -fx-font-family: verdana;
    -fx-font-size: 11.5px;
}

.menu:hover,
.menu:showing {
    -fx-background-color: #CCE8FF;
    -fx-text-fill: black;
}

.menu-item {
    -fx-background-color: #F2F2F2;
    -fx-text-fill: #000000;
    -fx-font-family: verdana;
    -fx-font-size: 11.4px;
}

.menu-item .label {
    -fx-text-fill: #000000;
    -fx-font-family: verdana;
}

.menu-item:focused .label {
    -fx-text-fill: #000000;
    -fx-font-family: verdana;
}

.menu-item:focused {
    -fx-background: -fx-accent;
    -fx-background-color: #91C9F7;
    -fx-text-fill: #000000;
    -fx-font-family: verdana;
}

.menu-item:disabled {
    -fx-background: -fx-accent;
    -fx-text-fill: #000000;
    -fx-opacity: 0.9;
    -fx-font-family: verdana;
}

.menu-item:focused:disabled {
    -fx-background: -fx-accent;
    -fx-background-color: lightgray;
    -fx-text-fill: #000000;
    -fx-font-family: verdana;
    -fx-opacity: 0.9;
}
于 2019-05-14T10:06:20.570 回答