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

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:

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

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

.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 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?

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

Keine Wirkung.

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 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.

.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:

.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 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.