So I am having a small problem which is pretty weird. I have styled my menu and menu bar of my undecorated application. If I hover a menu item in the context menu the menu will change it's background color to the default one of windows.
Pictures of the scenario (in the second picture, I am hovering the 'Models' menu item):
Does anyone knows how to fix the blue backgrounds? I want the menu to have my hover background like in the first picture. And the menu item should have its own background also and not jump to blue if I am not with my mouse on it.
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);
}
Thank you in advance.
Dota2 :
you are adding redundant layers of properties to .menuand menu-item. Trying taking care of the concerned properties only. For example in your case menu needs to follow your coloring pattern when either hovered or in showing event.\nSo add\n\n.menu:hover, .menu:showing{\n -fx-background-color: <preferred backgound>;\n}\n\n\nSimilarly add only focused property to menu-item, because the rest it shares the context-menu backgound\n\n.menu-item:focused{\n -fx-background-color: <preferred background>;\n}\n\n\nLook at the snapshot of the simple demo:\n\n",
2016-08-29T15:38:32
Elltz :
add this to your css \n\n.menu-item:focused {\n -fx-background-color : <preferred color>;\n}\n",
2016-08-11T23:11:53