Gtk3 Css按鈕狀態

Question

我在Ubuntu natty上使用gtk + -3.2.3和css。在下面的代碼中，我有一個按鈕，開始時背景顏色爲綠色並帶有藍色文字。當我將鼠標懸停在上面時，背景顏色會變爲紅色，但字體顏色不會像我指定的那樣變爲白色。同樣，當按住按鈕時，背景顏色會變爲橙色，但字體顏色不會更改爲我指定的青色。這是爲什麼發生？這是窗口管理器是否覆蓋我的代碼？

/*Compile with: 
    gcc -Wall -o cssbutton2 `pkg-config --cflags --libs gtk+-3.0` cssbutton2.c 
*/ 

#include <gtk/gtk.h> 

int main(int argc, char *argv[]) 
{ 
    GtkWidget *window; 
    GtkWidget *button; 
    GtkCssProvider *provider; 
    GdkDisplay *display; 
    GdkScreen *screen; 

    gtk_init (&argc, &argv); 

    window = gtk_window_new (GTK_WINDOW_TOPLEVEL); 
    gtk_window_set_default_size(GTK_WINDOW(window), 280, 200); 
    g_signal_connect (GTK_WIDGET (window), "destroy", 
         G_CALLBACK (gtk_main_quit), NULL); 

    button = gtk_button_new_with_label("CssButton"); 
    gtk_widget_set_name (GTK_WIDGET(button), "mybutton");   
    gtk_widget_set_halign (GTK_WIDGET(button),GTK_ALIGN_CENTER); 
    gtk_widget_set_valign (GTK_WIDGET(button),GTK_ALIGN_CENTER); 
    gtk_widget_set_size_request(GTK_WIDGET(button), 200, 120); 
    gtk_container_add(GTK_CONTAINER(window),button); 

    provider = gtk_css_provider_new(); 
    display = gdk_display_get_default(); 
    screen = gdk_display_get_default_screen (display);                     
    gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_USER); 

    gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider), 
          " GtkWindow {\n"       
          " background-color: tan;\n" 
          "}\n" 
          " GtkButton {\n" 
          " -GtkWidget-focus-line-width: 0;\n" 
          " border-radius: 15;\n" 
          " font: Sans 23;\n" 
          " color: #00008B;\n"          
          " background-color: green;\n" 
          "}\n" 
          " .button:hover {\n" 
          " background-color: red;\n" 
          " color: white;\n" 
          "}\n" 
          " .button:hover:active {\n" 
          " background-color: orange;\n" 
          " color: cyan;\n" 
          "}\n", -1, NULL); 

    g_object_unref (provider); 
    gtk_widget_show_all(window); 
    gtk_main(); 
    return(0); 
} 

Answer 1

我剛剛測試了這個在Ubuntu 12.04（GTK + 3.4.2），並加入background-image: none;到GtkButton樣式定義後，這個工作你描述的是期望的行爲。也許只是GTK中的一個bug已經被修復了？

Answer 2

可以參考GTK的CSS樣式語法： https://developer.gnome.org/gtk3/stable/chap-css-overview.html

/*Compile with: 
    gcc -Wall -o cssbutton2 `pkg-config --cflags --libs gtk+-3.0` cssbutton2.c 
*/ 

#include <gtk/gtk.h> 

int main(int argc, char *argv[]) 
{ 
    GtkWidget *window; 
    GtkWidget *button; 
    GtkCssProvider *provider; 
    GdkDisplay *display; 
    GdkScreen *screen; 
    //GtkStyleContext *context; 

    gtk_init (&argc, &argv); 

    window = gtk_window_new (GTK_WINDOW_TOPLEVEL); 
    gtk_window_set_default_size(GTK_WINDOW(window), 280, 200); 
    gtk_window_set_title(GTK_WINDOW(window),"CSSBUTTON"); 
    g_signal_connect (GTK_WIDGET (window), "destroy", 
         G_CALLBACK (gtk_main_quit), NULL); 

    button = gtk_button_new_with_label("CssButton"); 
    gtk_widget_set_name (GTK_WIDGET(button), "mybutton");   
    gtk_widget_set_halign (GTK_WIDGET(button),GTK_ALIGN_CENTER); 
    gtk_widget_set_valign (GTK_WIDGET(button),GTK_ALIGN_CENTER); 
    gtk_widget_set_size_request(GTK_WIDGET(button), 200, 120); 
    gtk_container_add(GTK_CONTAINER(window),button); 

    provider = gtk_css_provider_new(); 
    display = gdk_display_get_default(); 
    screen = gdk_display_get_default_screen (display);                     
    // context = gtk_widget_get_style_context(window); 

    gtk_css_provider_load_from_data (provider, 
          "*{" 
          "color:green;" 
          "font-family:Monospace;" 
          "border:1px solid;" 
           " }"  
          " window {"       
          " background-color: rgba(50,30,70,100);" 
          " background-image:none;" 
          "}" 
          " button {" 
          " border-radius: 15px;" 
          " font: Sans 23;" 
          " color: #00008B;"          
          " background-color: green;" 
          " background-image:none;" 
          "}" 
          " button:hover {" 
          " background-color: red;" 
          " color: white;" 
          "}" 
          " button:hover:active {" 
          " background-color: orange;" 
          " color: cyan;" 
          "}", -1, NULL); 

    gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER(provider),GTK_STYLE_PROVIDER_PRIORITY_USER); 
    g_object_unref (provider); 
    gtk_widget_show_all(window); 
    gtk_main(); 
    return(0); 
}