bobby: 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:)
  1. Hallo,

    Kann ich das PSeudoelement auch anders ansprechen?

    probier mal

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

    Gruß
    Kalk

    1. 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:)
    2. 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

      1. 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:)
      2. 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

        --
        Signaturen sind bloed (Steel) und Markdown ist mächtig.
        1. 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

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

          --
          -> 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:)
          1. 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.
            1. 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:)
              1. 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.
                1. 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)?

                  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:)
        3. @@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 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.