Allerdings greift background-color: red nicht bei hover.
Selbst wenn ich aus background-color nur background mache. klappt es nicht.
Dachte über diesen Trick schaffe ich es.
Eine Farbänderung bei :hover mußt du mit background-color machen, wenn du ein Icon für diesen Menüpunkt hast.
Ansonsten überschreibt dir background: red dein Icon... 
Eine Farbänderung bei :hover mußt du mit background-color machen
Hm, muss ist wohl nicht so ganz richtig, denn es gäbe auch den → background: #ecf0f6 url("data:image/png;base64,… Weg.
Allerdings verschiebt er mir nun hier das Icon bei hover:
Hm, du hast jetzt in Zeile 1 das Komma mit weit hinten, zwischen den zwei Kommentaren. Verschiebe es mal nach vorn, direkt hinter #toggle_zoom. Entferne auch beim zweiten #toogle_zoom (also in Zeile 2) das Leerzeichen dahinter.
Kannst du mir eigentlich mal hier deine beiden Icons zur Verfügung stellen, damit ich mit ihnen testen kann?
Sehr gerne:
Hier: Tatsächliche Größe
Hier: Nur-Text.zoomen
Ich habe nur die Namen hier etwas verkürzt und hoffe, es ist richtig
Und mit background-color bleibt es bei hover zwar bestehen aber färbt sich nicht ein.
Du beziehst dich jetzt auf #menu_zoomReset:hover? Das färbt sich bei mir rot ein. So sieht mein Code aus:
#toggle_zoom, /*Zoom-Nur Text zoomen*/
#toggle_zoom[type="checkbox"][checked="false"] > .menu-iconic-left {
appearance: none !important;
background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Nur Text zoomen.png") no-repeat !important;
margin-left: 5px !important;
min-height: 24px !important;
padding-left: 10px !important;
background-position: 5px 5px !important;
}
#toggle_zoom:hover {
background-color: red !important;
color: white !important; }
#menu_zoomReset:hover{
-moz-appearance:none !important;
margin-right: -1px !important;
background: red url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Tatsächliche Größe.png") no-repeat !important;
border-width: thin !important;
border-style: solid !important;
min-height: 15px !important;
padding-left: 35px !important;
background-position: 10px 10!important;
}Die Festlegungen zu den Symbolen wirken bei mir noch nicht, da mir die Symbole fehlen.
Ich verstehe die Logik nicht mehr?
Welche Logik?
Aber aufgeben ist keine Option.
Ich habe mal ein Weilchen experimentiert. Mit der Zusammenfassung zweier Selektoren in den Zeilen 1 und 2 habe ich das Problem, dass mir für „Nur Text zoomen“ das Symbol doppelt angezeigt wird. Ist das bei dir auch so?
in die obere linke Ecke.
Schaue dir mal in Beitrag #23 die Zeile 9 des Codes für „Tatsächliche Größe“ zu background-position an. Dort fehlt bei der zweiten 10 die Einheit px.
Allerdings zeigt es mir nun das Icon nicht bei "aktiv" an, dafür bei hover.
Das ist logisch - du hast im nomalen Code background-color genommen und sowohl Farbe als auch Symbol sowie non-repeat zugewiesen. Das geht nicht, denn background-color ist eine Einzeleigenschaft, nur für Farben. background dagegen ist eine Sammeleigenschaft, der du mehrere Einzeleigenschaften zuweisen kannst. Also, auch im ersten Code background verwenden.
Alternativ kannst du background in drei Einzeleigenschaften aufsplitten: background-color, background-image und background-repeat.
Hier klappt es leider nicht.
#menu_tabsSidebar{ /*Ansicht-Sidebar-Lesezeichen*/
-moz-appearance:none !important;
background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
min-height: 24px !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}
#menu_tabsSidebar:hover{
-moz-appearance:none !important;
margin-right: -1px !important;
background: #f44336 url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
border-width: thin !important;
min-height: 24px !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}Statt des Icons und background red bei hover wird als Symbol ein Häkchen gesetzt und der Hintergrund bleibt schwarz. 
Es sollte eigentlich dieses Icon statt des Häkchens erscheinen.
Selbst die Konstellation mit background-image und background-color (siehe unten), bringt nicht den gewünschten Effekt.
#menu_tabsSidebar:hover{
-moz-appearance:none !important;
margin-right: -1px !important;
background-image url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
background-color: #f44336
border-width: thin !important;
min-height: 24px !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}#menu_tabsSidebar ist aber nicht der Selektor für Ansicht --> Sidebar --> Lesezeichen, der richtige Selektor ist #menu_bookmarksSidebar.
#menu_bookmarksSidebar{ /*Ansicht-Sidebar-Lesezeichen*/
background: url("file:///C:/Users/Andi/Icons%20Firefox/application_form_edit.png") no-repeat !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}
#menu_bookmarksSidebar:hover{
margin-right: -1px !important;
background: #f44336 url("file:///C:/Users/Andi/Icons%20Firefox/application_form_edit.png") no-repeat !important;
border-width: thin !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}Du musst nur dein Icon wieder einfügen noch.
Versuch mal folgendes:
#menu_bookmarksSidebar[checked="true"] { /*Ansicht-Sidebar-Lesezeichen*/
background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
min-height: 24px !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}
#menu_bookmarksSidebar[checked="true"]:hover {
margin-right: -1px !important;
background: #f44336 url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
border-width: thin !important;
min-height: 24px !important;
padding-left: 35px !important;
background-position: 10px 10px !important;
}Der Ausdruck -moz-appearance ist veraltet - neu ist: appearance.
Außerdem sollte es auch ganz ohne diesen Ausdruck klappen.
Wen das Häkchen trotzdem noch erscheint, kannst du testweise noch list-style-image: none !important; hinzufügen.
Vieles wäre vermeidbar gewesen...
Es sind zwar nur Kleinigkeiten wie die angesprochenen Klammern, vergessene Einheiten und sowas:
background-color: red url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Tatsächliche-Größe.png") no-repeat !important;
Ist das eine behoben, schleicht sich woanders einer wieder ein.
Was das letzte CSS angeht, hatte ich das hier schon mal angesprochen:
Bei hover reicht es, nur die Änderungen einzutragen. Daher auch die Separierung von solchen Zeilen:
background: #f44336 url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;
zu:
background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") !important;
background-repeat: no-repeat !important;
background-color: #f44336 !important;Mit einer Zeile wird zB background-position verworfen. Und dann kann auch kein Mischmasch wie oben entstehen. Und da ich vermute, dass Firefox die user...css genau einmalig einliest beim Start, dürfte die Menge der Zeilen auch vollkommen unerheblich sein. Es wird so einfach übersichtlicher. Lernen bedeutet nicht nur, sich was vormachen zu lassen, sondern auch konkret Fehlern nachgehen und beim nächsten Mal zu vermeiden. Falls der Inspector alle Zeilen anzeigen sollte, dann ist bei den fehlerhaften auf jeden Fall zu sehen, dass nicht aktiv, sei es durch ein gelbes Warndreieck oder ausgegraut.
Auch, wenn es nicht sonderlich beliebt ist, es hilft: Stylus
Oder meinst du, ich prüfe mein CSS nicht, weil ich das so "toll" kann? Weit weg davon. 