CSS :after Bild einfügen und diesem eine Klasse zuweisen

[bobby]

Moin,

ich hab folgendes Problem. Ich füge per CSS über :after ein Bild hinzu und möchte diesem Bild eine Klasse zuweisen um später :hover darauf abzufangen. Ist das überhaupt möglich?

Kann ich das PSeudoelement auch anders ansprechen?

input.unvalide:after{content:url('/images/icons/help_red.png')   }

Gruß Bobby

[Tabellenkalk]

Hallo,

Kann ich das PSeudoelement auch anders ansprechen?

probier mal

input.unvalide:after:hover{border:7ex dashed purple;}

Gruß
Kalk

[bobby]

Moin,

probier mal

input.unvalide:after:hover{border:7ex dashed purple;}

da tut sich nix.

Gruß Bobby

[netsurfer]

Hallo,

probier mal

 input.unvalide:hover::after {border:7ex dashed purple;}

Der springende Punkt ist, dass du nicht das Hover Ereignis des Pseudo-Elements erfassen kannst (Pseudo-Elemente existieren nicht im DOM), sondern das des eigentlichen (DOM)Elements, und daraufhin das entsprechende Pseudo-Element anpassen kannst.

Gruß Gunther

[bobby]

Moin,

Der springende Punkt ist, dass du nicht das Hover Ereignis des Pseudo-Elements erfassen kannst (Pseudo-Elemente existieren nicht im DOM), sondern das des eigentlichen (DOM)Elements, und daraufhin das entsprechende Pseudo-Element anpassen kannst.

Danke. Also ist das ganze nicht so einfach möglich. Schade

Gruß Bobby

[Matthias Apsel]

Hallo netsurfer,

Der springende Punkt ist, dass du nicht das Hover Ereignis des Pseudo-Elements erfassen kannst (Pseudo-Elemente existieren nicht im DOM), sondern das des eigentlichen (DOM)Elements, und daraufhin das entsprechende Pseudo-Element anpassen kannst.

Und der nächste springende Punkt ist, dass input ein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.

Bis demnächst
Matthias

[netsurfer]

Hallo Matthias,

Der springende Punkt ist, dass du nicht das Hover Ereignis des Pseudo-Elements erfassen kannst (Pseudo-Elemente existieren nicht im DOM), sondern das des eigentlichen (DOM)Elements, und daraufhin das entsprechende Pseudo-Element anpassen kannst.

Und der nächste springende Punkt ist, dass input ein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.

ähm ja ..., natürlich!

Sorry, war etwas "unaufmerksam" und korrigiere meine Aussage dahingehend, dass das Ganze selbstverständlich nur für Elemente gilt, die überhaupt Pseudo-Elemente haben dürfen!

Danke für den Hinweis! ;-)

Gruß Gunther

[bobby]

Moin,

Und der nächste springende Punkt ist, dass input ein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.

Danke ja, hatte ich auch bereits mitbekommen. Habe es mit dem LAbel drum herum versucht, was aber dennoch nicht funktionierte. Habe es nun hybrid mit JS und PHP und entsprechenden Elementen mit entsprechenden CSS-Klassen gelöst (um beides abzufangen)

Gruß Bobby

[Matthias Apsel]

Hallo bobby,

input.unvalide:after:hover {border:7ex dashed purple;}

Habe es mit dem LAbel drum herum versucht, was aber dennoch nicht funktionierte.

label danach sollte funktionieren.

input:invalid:hover + label::after {border:7ex dashed purple;}

Habe es nun hybrid mit JS und PHP und entsprechenden Elementen mit entsprechenden CSS-Klassen gelöst (um beides abzufangen)

Es gibt die Pseudoklassen valid und invalid, es gibt aber keine CSS-Klassen.

Bis demnächst
Matthias

[bobby]

Moin,

input:invalid:hover + label::after {border:7ex dashed purple;}

OK, das kommt aber für nicht in Frage, da ich über diese Typen hinaus Validität prüfe (Dupletten, Wegwerf-Email-Adressen etc)

Es gibt die Pseudoklassen valid und invalid, es gibt aber keine CSS-Klassen.

Dann ebend Selektoren... bzw. das Class-Attribut ;)

Gruß Bobby

[Matthias Apsel]

Hallo bobby,

input:invalid:hover + label::after {border:7ex dashed purple;}

OK, das kommt aber für nicht in Frage, da ich über diese Typen hinaus Validität prüfe (Dupletten, Wegwerf-Email-Adressen etc)

Dann eben

input.invalid:hover + label::after { … }

ebend

Du kommst nicht zufällig aus der Gegend um Halle(Saale)?

Bis demnächst
Matthias

[bobby]

Moin,

Dann eben

Dann eben eben... ;)

Wie gesagt, hab ein Workaround geschrieben. Ist auch schnell und ziemlich simpel

ebend

Du kommst nicht zufällig aus der Gegend um Halle(Saale)?

Nö

Gruß Bobby

[Gunnar Bittersmann]

@@Matthias Apsel

Und der nächste springende Punkt ist, dass input ein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.

Nein.

Der springende Punkt ist, dass input ein replaced element ist und deshalb keinen generierten Inhalt haben darf.

Andere leere Elemente wie hr oder meta dürfen das durchaus.

LLAP 🖖