:hover pseudo-class einem Element hinzufügen mit Javascript?

    Firefox-Version
    115.3.1esr
    Betriebssystem
    macOs 10.13.6

    Das hat mich schon lange interessiert; kann man einem Element eine Klasse oder auch Attribute hinzufügen mit Javascript?

    Solche die schon existieren in Firefox oder generell, nichts Erfundenes.

    Im speziellen Fall als Beispiel die Pseudoklasse :hover.

    Das hier funktioniert mit CSS, weil toolbarbutton im Firefox JS die Klasse "hover" (oder ":hover" ?) zugewiesen hat:

    CSS
    toolbarbutton:hover .toolbarbutton-icon {
    background-color: red !important;
}

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    CSS
    .toolbarbutton-icon:hover {
    background-color: red !important;
}

    Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.

    In vielen Javascripts die wir hier teilen, sehe ich wie class oder Attribute zugewiesen werden für selber gebaute Elemente, komme aber nicht dahinter was der korrekte Code wäre in so einem Fall.

    Kann man da was machen? :/

    Zitat von Horstmann

    kann man einem Element eine Klasse oder auch Attribute hinzufügen mit Javascript?

    JavaScript
    el.classList.add('classname');
el.setAttribute('attribute', 'value');
    Zitat von Horstmann

    Im speziellen Fall als Beispiel die Pseudoklasse :hover.


    Eine Pseudoklasse kannst du nicht via JS hinzufügen. Um die CSS-Eigenschaften beim Herüberfahren mit der Maus via JS zu verändern, könntest du vielleicht im mouseenter-Event eine Klasse hinzufügen und diese im mouseleave-Event wieder entfernen. Aber ansonsten:

    Zitat von Horstmann

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    Ich denke, dass du hier ein bisschen kompliziert denkst. Ergänze doch einfach die CSS-Regel, die dir fehlt. Du kannst schließlich nicht nur Selektoren verwenden, die es im originalen CSS gibt. Wozu braucht es da überhaupt JavaScript?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    Ich denke, dass du hier ein bisschen kompliziert denkst. Ergänze doch einfach die CSS-Regel, die dir fehlt. Du kannst schließlich nicht nur Selektoren verwenden, die es im originalen CSS gibt. Wozu braucht es da überhaupt JavaScript?

    Danke für die Antwort; aber wie kann man zB für .toolbarbutton-icon eine hover spezifische Regel mit CSS hinzufügen?

    Attribute oder sowas in der Art? :/

    Zitat von Sören Hentzschel

    .toolbarbutton-icon:hover { property: value; }? Ansonsten verstehe ich die Frage nicht.

    Geht eben nicht, das ist ja das Problem.

    Hast du's probiert, geht's bei dir?

    CSS
    .toolbarbutton-icon:hover {
    background-color: red !important;
    outline: 5px solid red !important;
    outline-offset: -1px !important;
}

    Keine Wirkung.

    Nein, ich habe es nicht probiert. Ich habe mich nur auf das bezogen, was du geschrieben hast. Aber wenn das CSS nicht funktioniert, kann JavaScript daran auch nichts ändern.

    Rein von der Logik her, wie ich mir vorstelle, was du vorhast, gehört das :hover eh auf das Button-Element, also so in der Art: toolbarbutton:hover .toolbarbutton-icon, wie in deinem ersten Beispiel. Was genau ist denn das Problem damit?

    Zitat von Sören Hentzschel

    Rein von der Logik her, wie ich mir vorstelle, was du vorhast, gehört das :hover eh auf das Button-Element, also so in der Art: toolbarbutton:hover .toolbarbutton-icon, wie in deinem ersten Beispiel. Was genau ist denn das Problem damit?

    Das hier, von dem ersten Beitrag: ;)

    Zitat von Horstmann

    Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.

    Ich benutze mehrere überbreite Buttons, bei denen ich gerne eine separate Hoverfunktion für Button und Icon hätte, v.a. aus gestalterischen Gründen (Hintergrund etc.).

    Wenn's nicht geht, geht's halt nicht.


    Zitat von Horstmann

    Wenn's nicht geht, geht's halt nicht.

    Prinzipiell geht das schon:

    Wenn man z.B. beim Icon des 'about:config'-Buttons :hover hinzugefügt und in der Entwicklungsumgebung den :hover-Filter einschaltet, dann sieht man, dass der Selektor funktioniert (nur inline beim 'about:config'-Button über Stilbearbeitung).

    CSS
    toolbar .toolbarbutton-1 > .toolbarbutton-icon:hover {
    filter: brightness(200%) contrast(200%) !important;
}

    Das Problem ist, dass das Icon den hover-Event gar nicht bekommt, weil dieser vorher vom toolbarbutton "konsumiert" wird.

    Deshalb funktioniert es wohl eher nur theoretisch mit CSS oder man kann da vielleicht noch was tricksen, da kenne ich mich mit CSS zu wenig aus... :/

    Zitat von BrokenHeart

    Prinzipiell geht das schon:


    Wenn man z.B. beim Icon des 'about:config'-Buttons :hover hinzugefügt und in der Entwicklungsumgebung den :hover-Filter einschaltet, dann sieht man, dass der Selektor funktioniert (nur inline beim 'about:config'-Button über Stilbearbeitung).

    CSS
    toolbar .toolbarbutton-1 > .toolbarbutton-icon:hover {
    filter: brightness(200%) contrast(200%) !important;
}

    Das Problem ist, dass das Icon den hover-Event gar nicht bekommt, weil dieser vorher vom toolbarbutton "konsumiert" wird.

    Hmm, verstehe.

    Ich hatte auch schon mit pointer-events rumprobiert, das wäre dann aber zu viel des Guten, ging aber eh nicht.

    CSS
    .toolbarbutton-1 {
    pointer-events: none !important;
}

.toolbarbutton-1 .toolbarbutton-icon {
    pointer-events: auto !important;
}

    Das Ziel wäre eben dass Sowas in der Art funktioniert; getrenntes :hover Verhalten für Button und Icon im Button:

    CSS
    .toolbarbutton-1:hover .toolbarbutton-icon {
    background-color: transparent !important;
}

.toolbarbutton-1 .toolbarbutton-icon:hover {
    background-color: lightgrey !important;
}

    Nur um das nochmal verständlicher zu erklären.

    Naja, war nur so eine Idee.

    Zitat von Horstmann

    Ich benutze mehrere überbreite Buttons, bei denen ich gerne eine separate Hoverfunktion für Button und Icon hätte, v.a. aus gestalterischen Gründen (Hintergrund etc.).


    Ich verstehe den Anwendungsfall nicht. Der Sinn und Zweck von :hover ist es, zu signalisieren, dass etwas passiert, wenn man auf einen Link oder Button klickt. Und es passiert etwas, wenn man irgendwo auf den Button klickt, nicht nur speziell beim Icon. Wieso sollte man also das :hover auf das Icon setzen? Nur den Hintergrund vom Icon kannst du ja verändern. Aber der Auslöser dafür sollte dann ja trotzdem das Herüberfahren über den Button bleiben. Welchen Zweck würde das ansonsten erfüllen?

    Zitat von Sören Hentzschel

    Ich verstehe den Anwendungsfall nicht.

    Das war auch mein erster Gedanke. Wenn etwas sein Aussehen beim 'hovern' verändert, dann weiß ich, dass für das gesamte Element (in dem Fall Button) eine definierte Aktion erfolgt. Wenn ich als Anwender aber beim Drüberfahren mit der Maus nur bei dem Icon eine sichtbare Änderung sehe, dann denke ich doch, ich muss also immer auf das kleine Icon klicken, damit etwas passiert, was ja so nicht stimmt. Von der Benutzerführung her, nicht sehr einleuchtend... :/

    Zitat von BrokenHeart
    Zitat von Sören Hentzschel

    Ich verstehe den Anwendungsfall nicht.

    Das war auch mein erster Gedanke. Wenn etwas sein Aussehen beim 'hovern' verändert, dann weiß ich, dass für das gesamte Element (in dem Fall Button) eine definierte Aktion erfolgt. Wenn ich als Anwender aber beim Drüberfahren mit der Maus nur bei dem Icon eine sichtbare Änderung sehe, dann denke ich doch, ich muss also immer auf das kleine Icon klicken, damit etwas passiert, was ja so nicht stimmt. Von der Benutzerführung her, nicht sehr einleuchtend... :/

    Jungens, es ist nur ein Designfaktor. ;)

    Du und Sören Hentzschel habt völlig recht, dass es für die Anwendung evtl. nicht zwingend Sinn macht.


    Aber: Ihr habt einen verbreiterten Button in der Navbar.

    Der Button ist verbreitert damit man ihn einfacher treffen kann mit der Maus, evtl. weil der Button auch nur bei :hover sichtbar ist.

    Der Button an sich hat auch einen Hintergrund oder ein border-image etc. gebastelt bekommen, was nur bei :hover auftaucht.

    Also wird der gesamte Button zB bei :hover auf eine bestimmte Art und Weise angezeigt.

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird, und eben nicht wenn wenn über den gesamten Button gehovert wird (der ja schon seinen eigenen Hover Effekt hat).

    Dann macht es schon Sinn - nicht für die Funktion des Buttons, die bleibt gleich und soll es auch - aber für die visuelle Erscheinung und teilweise für die Anwendung.


    Die Frage war aber ob es geht; nach den Antworten hier und anhand meiner Recherchen könnte oder müsste man anscheinend relativ massiv mit Javascript eingreifen, was ich nicht kann und die Sache nicht wert ist.

    Thema mal wieder erledigt. ;)

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird


    Aber wieso, wenn das überhaupt keine Funktion erfüllt? Was soll der Effekt dann aussagen? Das trägt dann ja höchstens zur Irritation bei.

    Muss man angewendet haben mit einem breiten Button um's nachzuvollziehen, und dann ist es oft immer noch subjektives Empfinden.

    Design-relevante Wahrnehmung ist ein spannendes Thema (nicht dass ich ein Experte wäre), sprengt aber evtl. hier etwas den Rahmen.

    Jetzt stell ich aber erstmal den Icon HG für :hover wieder auf transparent um für den einen Button; einfach weil es mich nervt, und der Button schon einen extra HG hat bei Hover.