Wie 'Hover-Background' entfernen bei Add-ons Icons ?

JeffWood

Hallo,

habe schon etliches an CSS-Anweisungen durchprobiert, um beim "Überfahren" mit der Maus den grauen System-Hintergrund auszublenden, aber nichts scheint zu funktionieren. Alle CSS-Befehle, welche bei anderen Icons/Texten funktionieren, scheinen bei Add-ons Icons keinen Effekt zu haben. Die filter werden angewendet, aber die Befehle für den Hintergrund werden ignoriert. Wo ist da der Fehler?

Wäre toll, wenn mir da jemand helfen könnte...

CSS

#navigator-toolbox  #forecastfox_s3_fix_version-browser-action /*- Forecast Fox */ {
	filter: drop-shadow(2px 2px 1px #444444) !important;
}
#navigator-toolbox  #_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action, /*- NoScript -*/
#navigator-toolbox  #ublock0_raymondhill_net-browser-action,  /*- UBlock -*/
#navigator-toolbox  #jid1-mnnxcxisbpnsxq_jetpack-browser-action /*- Privacy Badger -*/ {
 	filter: grayscale(100%) drop-shadow(2px 2px 1px #444444) !important; 
}
#navigator-toolbox  #_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action:hover:not([disabled="true"]), /*- NoScript -*/
#navigator-toolbox  #ublock0_raymondhill_net-browser-action:hover:not([disabled="true"]),  /*- UBlock -*/
#navigator-toolbox  #jid1-mnnxcxisbpnsxq_jetpack-browser-action:hover:not([disabled="true"]) /*- Privacy Badger -*/ {
       -moz-appearance:none!important;
	background:transparent!important;
 	filter: drop-shadow(2px 2px 1px #444444) !important;
}

Alles anzeigen

[attachment=0]Hover.png[/attachment]

Sören Hentzschel

Hallo,

nach z.B. #navigator-toolbox #_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action:hover:not([disabled="true"]) fehlt noch .toolbarbutton-badge-stack, also:

CSS

#navigator-toolbox  #_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action:hover:not([disabled="true"]) .toolbarbutton-badge-stack, /*- NoScript -*/
#navigator-toolbox  #ublock0_raymondhill_net-browser-action:hover:not([disabled="true"]) .toolbarbutton-badge-stack,  /*- UBlock -*/
#navigator-toolbox  #jid1-mnnxcxisbpnsxq_jetpack-browser-action:hover:not([disabled="true"]) .toolbarbutton-badge-stack /*- Privacy Badger -*/ {
    background: transparent !important;
}

Sören Hentzschel

Hier übrigens ein Tipp, wie du dir das Leben bei Hover-Geschichten vereinfachst. Klicke im Regeln-Panel auf das Symbol mit den drei Ebenen und aktiviere die Checkbox ":hover", nachdem du das Element im DOM-Baum ausgewählt hast, bei welchem du simulieren möchtest, dass sich gerade die Maus darüber befindet. Dann kannst du im DOM-Baum ganz bequem andere Elemente ansehen, immer unter der Prämisse, dass die Maus gerade über dem zuvor ausgewählten Element ist. So war es dann auch einfach, die Lösung für deine Frage zu finden, weil man so rechts nur noch schauen musste, welches Element die Hintergrundfarbe definiert hat.

JeffWood

Hallo Sören,

vielen Dank, hat geklappt... :klasse:

Werde deinen Tipp mit der :hover-Checkbox in Zukunft beherzigen. Ich muss mich wohl doch noch intensiver mit der ganzen Thematik beschäftigen...