Hover für einen Button erstellen

    MoinMoin,

    ich verwende die Erweiterung Awesome Throbber:

    https://addons.mozilla.org/de/firefox/add…ber/?src=search

    Bei einem Klick auf den Throbber in der Navigationsleiste kann ich somit eine beliebige Website öffnen.

    Was mich jetzt stört: Wenn ich mit der Maus auf den Throbber zeige bzw. diesen anklicke, funktioniert zwar wie gewünscht das Öffnen der eingestellten Website, es wird mir aber kein Hover-Effekt angezeigt wenn ich auf den Throbber zeige bzw. klicke - und genau das hätte ich gern.

    Zum besseren Verständnis zeige ich Euch anhand des Lesezeichen-Buttons was ich meine:

    Mauszeiger auf den Lesezeichen-Button:

    [Blockierte Grafik: http://www.abload.de/thumb/mauszeiger4dd8s.png]

    Lesezeichen-Button angeklickt:

    [Blockierte Grafik: http://www.abload.de/thumb/gedrcktv1chl.png]

    Derzeitiger Zustand beim Throbber wenn ich mit der Maus drauf zeige (soll aber so werden wie bei den beiden vorigen Bildern):

    [Blockierte Grafik: http://www.abload.de/thumb/awesomethrobbery2e3i.png]

    Seht Ihr da eine Möglichkeit, über die userchrome etwas anzupassen?

    Grüße

    Vitos

    Kannst mal so was probieren ...

    Code
    #navigator-throbber:hover{border:1px solid;border-color:#fff #000 #000 #fff !important}
#navigator-throbber:active{border:1px solid;border-color:#000 #fff #fff #000 !important}

    Farben und Rahmenbreite kannst du ja anpassen. Aber wozu eine Erweiterung, die "Throbber-Url" müsste man auch in about:config anpassen können.

    Zitat von Steph


    Farben und Rahmenbreite kannst du ja anpassen. Aber wozu eine Erweiterung, die "Throbber-Url" müsste man auch in about:config anpassen können.

    Vielen Dank erst mal für den Code, ich werde mal ein wenig damit probieren, leider passt es auch von der Größe nicht so ganz (Hover ist zu klein bzw. zu dicht am Button)

    Wie kann ich denn die Throbber-Url über about:config anpassen? Wenn ich dadurch eine Erweiterung einspare würde ich das gern machen...

    about:config -----> browser.throbber.url

    Wenn du den alten Code:

    #navigator-throbber:hover{border:1px solid;border-color:#fff #000 #000 #fff !important}
    #navigator-throbber:active{border:1px solid;border-color:#000 #fff #fff #000 !important}

    um

    #navigator-throbber{border:1px solid transparent !important;width:35px !important}

    ergänzt, sieht es dann besser aus?

    width:35px ist nur ein Beispiel, kann auch noch um - height:XXpx !important - ergänzt werden

    Steph: Damit bekomme ich es in der Breite hin, in der Höhe bekomme ich es allerdings nicht geändert (Code erweitert um height:20px !important;)

    Ein weiteres Problem ist auch, dass der Throbber-Button wohl aus 2 Icons besteht, 1x active und 1x inactive. Wenn Ich jetzt den Code für den Hover-Button verwende und mit der Maus drauf zeige bzw. klicke, springt der ganze Button immer um einige Pixel nach rechts - ist wohl doch recht Kniffelig die Angelegenheit.

    Boersenfeger: Den Eintrag gibt es bei mir unter about:config bereits, auch die entsprechende Seite die geöffnet werden soll ist als Wert hinterlegt, trotzdem funktioniert es nicht, ohne die Erweiterung passiert gar nichts wenn ich auf den Throbber klicke. Firefox läuft in der Version 15.0.1

    Zitat von Boersenfeger

    Du musst die Erweiterung deinstallieren und in about:config die Einträge dieser Erweiterung mit Rechtsklick zurücksetzen. Möglich, das diese noch blocken...

    Ich habe es jetzt sogar mal mit einem neuen Profil probiert, da geht wirklich gar nichts, korrekt eingetragen ist alles...

    Mit diesem Code

    Code
    toolbaritem[title="Aktivitätsanzeige"][align="center"][pack="center"][mousethrough="never"][disabled="false"][tooltip="moretip"][onclick="return AwesomeThrobber.ProcessClick(event);"][removable="true"]:hover{
background:red!important}

    wird er Hintergrund rot bei hover, habe diese Erweiterung mal installiert.

    Farbe musst du dir anpassen, evtl. auch die Helligkeit beim hovern mit

    opacity: .4!important;

    [Blockierte Grafik: http://www7.pic-upload.de/thumb/19.09.12/dkceajlg8mlw.png]

    So

    Code
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


    toolbaritem[title="Aktivitätsanzeige"][align="center"][pack="center"][mousethrough="never"][disabled="false"][tooltip="moretip"][onclick="return AwesomeThrobber.ProcessClick(event);"][removable="true"]:hover{
    background:red!important}

    funktioniert es hier auch in der userChrome.css


    [Blockierte Grafik: http://www10.pic-upload.de/thumb/19.09.12/dnfmn1aobp4z.png]

    Hm, ist echt merkwürdig, bei mir tut sich gar nichts, habe es auch gerade nochmal mit einem neuen Profil getestet.

    Vielleicht hängt es mit dem unter WIN7 verwendeten Theme zusammen, ich habe kein AERO oder sonst was aktiviert, sondern verwende noch ganz altbacken die klassische Windows-Oberfläche...

    Noch ein Versuch.

    In deine userChrome.css kopierst du bitte mal das ganz oben rein und speicherst es ab.

    @import url("Button hover.css");


    dann erstellst du dir eine Textdatei in die du diesen Code kopierst.

    Code
    toolbaritem[title="Aktivitätsanzeige"][align="center"][pack="center"][mousethrough="never"][disabled="false"][tooltip="moretip"][onclick="return AwesomeThrobber.ProcessClick(event);"][removable="true"]:hover{
    background:red!important}

    Dann schließt du die Datei und speicherst sie ab mit dem Namen: Button hover.css und packst sie auch in den Ordner Chrome.

    Dann bitte den Fx neu starten und mal testen.


    Mehr fällt mir ansonsten auch nicht ein.