nicht angemeldet
CSS :after Bild einfügen und diesem eine Klasse zuweisen
0 Tabellenkalk
0 0 0 0 
Matthias Apsel
0 0 0 Matthias Apsel
0
0 
Gunnar Bittersmann
CSS :after Bild einfügen und diesem eine Klasse zuweisen
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
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
Hallo,
Kann ich das PSeudoelement auch anders ansprechen?
probier mal
input.unvalide:after:hover{border:7ex dashed purple;}Gruß
Kalk-
Moin,
probier mal
input.unvalide:after:hover{border:7ex dashed purple;}da tut sich nix.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
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
-
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
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
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
inputein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
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
inputein 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
-
Moin,
Und der nächste springende Punkt ist, dass
inputein 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
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
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--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
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
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
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--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
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
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
-
@@Matthias Apsel
Und der nächste springende Punkt ist, dass
inputein leeres Element ist und deshalb keinen, auch keinen generierten, Inhalt haben darf.Nein.
Der springende Punkt ist, dass
inputein replaced element ist und deshalb keinen generierten Inhalt haben darf.Andere leere Elemente wie
hrodermetadürfen das durchaus.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-