鼠标离开时的菜单颜色更改

时间:2018-03-30 01:58:36

标签: java css javafx

我正在使用这个GUI,并且遇到了一个带有样式的小问题。我正在尝试尽可能多地自定义程序,但可能需要使默认的菜单样式正确更改。问题是,当我将鼠标悬停在菜单和菜单项上时,会使用正确的颜色。但是,当我离开按钮时,会再次出现默认的蓝色。您可以在“主题”按钮上看到此信息。如果我将鼠标悬停在它上面,它将变成当前照亮“Light”菜单项的红色。

Weird Glitch

.menu-bar {
    -fx-background-color: linear-gradient(rgb(255, 118, 118) 0%, rgb(237, 101, 101) 100%);
    -fx-text-fill: lightgrey;
}

.menu .text, .menu-item:hover .text {
    -fx-fill: white;
}

.menu-item:hover, .menu:hover {
    -fx-background-color: #ea5353;
}

.menu-item .text {
    -fx-fill: black;
}

我尝试过其他的psuedo选择器,例如“.menu:pressed,.menu:focused,.menu:selected”,但没有成功。有什么建议吗?

1 个答案:

答案 0 :(得分:1)

只需使用

.menu-bar {

    -fx-background-color: linear-gradient(rgb(255, 118, 118) 0%, rgb(237, 101, 101) 100%);    
    -fx-selection-bar: #ea5353 ;
    -fx-text-background-color: lightgrey ;
    -fx-focused-text-base-color: white ;
}

这是一个测试工具:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MenuStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        Menu themes = new Menu("Themes", null, new MenuItem("Light"), new MenuItem("Dark"),
                new MenuItem("Cherry Blossom"));
        MenuBar menuBar = new MenuBar(new Menu("File"), themes, new Menu("Help"));

        BorderPane root = new BorderPane();
        root.setTop(menuBar);
        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("style.css");

        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

如果style.css包含上面的CSS,则会显示

enter image description here