Farbe bei Hover auf inaktiven Tabs ändern

dribs

Habe mir die Menü-/Tableiste mit folgendem Code angepasst

CSS

/* Farbe Menüleiste und Tabs */
   #toolbar-menubar, #menubar-items, #main-menubar {
   color: #000000 !important;
   background-color: #cccccc !important;}
   
   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tab-close-button {color: #000000 !important;}
   .tab-background {background: #cccccc !important;}
   .tab-background[selected="true"]{background-color:#ffffff !important;}
   
   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

Alles anzeigen

Jetzt wünsche ich mir noch, dass ein inaktiver Tab beim Darüberfahren mit dem Mauszeiger WEIß erscheint.

Probiert habe ich es mit .tab-background:hover {background: #ffffff !important;}, da tut sich aber nichts.

Wie muss es richtig heißen?

2002Andreas

Zitat von dribs

beim Darüberfahren mit dem Mauszeiger WEIß erscheint.

Teste bitte:

CSS

/* Farbe Menüleiste und Tabs */
   #toolbar-menubar, #menubar-items, #main-menubar {
   color: #000000 !important;
   background-color: #cccccc !important;}
   
   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tab-close-button {color: #000000 !important;}
   .tab-background {background: #cccccc !important;}
   .tab-background[selected="true"]{background-color:#ffffff !important;}
   
   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

.tabbrowser-tab:not([selected]) .tab-content:hover { 
  background: white !important;
 }

Alles anzeigen

dribs

Fast perfekt.

Allerdings ändert sich nicht nur der eigentliche Tab, sondern auch der dahinterliegende Teil in Weiß (siehe Bild 2).

Kann man da noch etwas machen?

Msfreak

Versuche mal zusätzlich zu deinem Code aus #1 diesen Eintrag:

CSS

  /* Farbe inaktiver Tab bei Hover */
.tabbrowser-tab:not([selected]):hover .tab-content {background-color: white !important;}

dribs

Verhält sich genauso wie beim Code von 2002Andreas. Siehe mein Beitrag #3

Ich wünschte mir, dass sich nur der 'eigentliche' Tab ändert, so wie beim "Neuer Tab" .

Trotzdem Danke.

2002Andreas

Zitat von dribs

ein inaktiver Tab beim Darüberfahren mit dem Mauszeiger WEIß erscheint.

Ich habe in deinem Code mal diese 2 Einträge entfernt.

CSS

   .tabbrowser-tab .tab-label {color: #000000 !important;}
   .tab-close-button {color: #000000 !important;}

Weil schwarz ist ja Standard.

Ansonsten teste bitte mal:

CSS

/*Inaktiver Tab hover HG weiß*/
.tabbrowser-tab:not([visuallyselected="true"]):hover > .tab-stack > .tab-background {
    background: #ffffff !important;    
}


/* Farbe Menüleiste und Tabs */
   #toolbar-menubar, #menubar-items, #main-menubar {
   color: #000000 !important;
   background-color: #cccccc !important;}
   
   .tab-background {background: #cccccc !important;}
   .tab-background[selected="true"]{background-color:#ffffff !important;}
   
   #main-window .tabs-newtab-button,
   #main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {color: #000000 !important;}

Alles anzeigen

dribs

Super, so habe ich mir das vorgestellt. Danke!

Damit ich euch nicht immer mit solchen Lappalien beschäftigen muss, habe ich in der Zwischenzeit

damit angefangen, mich mit dem CSS Inspektor zu beschäftigen.

Ich darf behaupten, dass ich der Lösung schon sehr nahe war. Es dauert aber bestimmt noch eine

Weile, bis ich da einigermaßen durchblicke.

Du bist mir heute zuvorgekommen, aber vielleicht schaffe ich es beim nächsten Mal ganz alleine

2002Andreas

Zitat von dribs

habe ich in der Zwischenzeit
damit angefangen, mich mit dem CSS Inspektor zu beschäftigen.

Farbe bei Hover auf inaktiven Tabs ändern

Sören Hentzschel 2. Juni 2021 um 22:16

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

FX89: Tabs (aktiven Tab markiert) unter die URL-Leiste

Tabs verschieben in mehrzeiliger Tableiste

Firefox 81 TABs viel zu klein !