michaah: Link über mehrere Elemente (orginalthread archiviert)

problematische Seite

Leider ist der Beitrag auf den ich mich beziehe schon archiviert :(

https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770405#m1770405

Ich habe das jetzt doch nochmal nachgestellt, und dabei mein Problem (Link über mehrere Elemente hinweg) im wesentlich lösen können.

Was mich noch stört (womit ich ggf. jedoch leben könnte, naja ...) ist dass die verschiedenen, übergreifend als Link definierten Elemente (Blaue Fläche, "Hinweistext", rotes Quadrat, Adresse (Ort, Straße)) unterschiedlich auf das hovern reagieren, manche einzeln, manche in ungewollter Kombination.

Vor allem verstehe ich nicht warum "Hinweistext" einen Rückmeldung gibt, wenn ich das blaue feld hovere? Beim roten Feld würde mir das eher einleuchten, weil es ja nur ein verschobenes span-Element ist.

Was ich gerne erreichen möchte: Entweder soll jedes der vier Elemente einzeln reagieren (ohne dass ich dafür vier einzelen Links definiere), oder alle vier gemeinsam. Der vorhandene Mischmasch kann etwas verwirren sieht auch nicht gut aus. Das möchte ich daher möglichst vermeiden.

  1. problematische Seite

    Hallo michaah,

    Vor allem verstehe ich nicht warum "Hinweistext" einen Rückmeldung gibt, wenn ich das blaue feld hovere?

    weil dein HTML kaputt ist?

    Screenshot fehlerhafter Quelltext

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      Hallo,

      um das kaputte HTML zu konkretisieren:

      • <html lang="de"> fehlt
      • <body> fehlt
      • das <a href="fotostrecke.html"> endet mitten im <p class="adresse"> und wird darum (bei mir in Chrome) vorher vom Browser beendet und innerhalb des <p> neu begonnen.
      • das <a href="tel:..."> wird gar nicht beendet (und deshalb vom Browser automatisch vor dem </p> geschlossen)

      Also, sooo kaputt ist's gar nicht, nur die Links sind kreativ durch's DOM gestreut. HTML benötigt korrekte Schachtelung.

      Rolf

      --
      sumpsi - posui - obstruxi
    2. problematische Seite

      1. problematische Seite

        Sorry für die Unachtsamkeit. Hätte ich vorher durch den vali jagen sollen, dann wären mir die Flüchtigkeitsfehler wohl angezeigt worden. Die Reparatur ändert jedoch nichts am Verhalten. Gunnar hat mich aber schon auf die Spur gebracht ...

        Danke auch an euch.

  2. problematische Seite

    @@michaah

    Vor allem verstehe ich nicht warum "Hinweistext" einen Rückmeldung gibt, wenn ich das blaue feld hovere?

    Weil sich das blaue Feld in dem a-Element befindet und dieses auch gehovert ist.

    Was ich gerne erreichen möchte: Entweder soll jedes der vier Elemente einzeln reagieren (ohne dass ich dafür vier einzelen Links definiere)

    Wohl nicht sinnvoll. Das suggeriert dem Nutzer, dass es verschiedene interaktive Elemente sind. Sind es aber nicht, sondern es ist ein Link; es passiert überall dasselbe.

    oder alle vier gemeinsam.

    Dann darfst du nicht img:hover stylen, sondern nur a:hover. Und wenn du magst, auch die Bilder darin bei gehovertem Link: mit Nachfahrenselektor a:hover img.

    🖖 Stay hard! Stay hungry! Stay alive! Stay home!

    --
    Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
    1. Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
    2. problematische Seite

      ...

      oder alle vier gemeinsam.

      Ganz klar die bevorzugte Version. Klare Rückmeldung so wie ich das will.

      Dann darfst du nicht img:hover stylen, sondern nur a:hover. Und wenn du magst, auch die Bilder darin bei gehovertem Link: mit Nachfahrenselektor a:hover img.

      Ich habe heute ewig mit den Selektoren und deren Kombinationen herumgemacht und eben den Wald vor lauter Bäumen nicht gefunden.

      Danke, genau so, "... mit Nachfahrenselektor a:hover img" geht es, und nach etwas aufräumen zwischen Adresse und Kontaktdaten sowie dem zusätzlichen stylen von a:hover .adresse funktioniert das jetzt so wie ich das will. Super. Mercie.

      So sieht das jetzt aus:

      Eigentlich wollte ich die kaputte Beispielseite belassen, jetzt habe ich sie versehntlich überschrieben, ... sorry ...

      1. problematische Seite

        Nur der Vollständigkeit halber für diejenigen, die vielleicht später mal auf diesen Thread stoßen: Ich lasse jetzt a:hover img doch ungestylt. Die Rückmeldung die die beiden Textblöcke geben sind ausreichend und die Seite bleibt ruhiger weil sich die Bilder nicht mehr um die Rahmenpixel verschieben.

        1. problematische Seite

          Servus!

          Nur der Vollständigkeit halber Ich lasse jetzt a:hover img doch ungestylt. Die Rückmeldung die die beiden Textblöcke geben sind ausreichend und die Seite bleibt ruhiger weil sich die Bilder nicht mehr um die Rahmenpixel verschieben.

          Du könntest

          a img {
          border: 2px solid transparent; 
          }
          
          a:focus img,
          a:hover img {
          border: 2px solid blue; 
          }
          

          versuchen. Denk immer dran, auch :focus für die Tastaturbedienung anzusprechen!

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → neuer Termin!SELF-Treffen 09.-11. Oktober 2020 in Mannheim
          1. problematische Seite

            @@Matthias Scharwies

            a img {
            border: 2px solid transparent; 
            }
            

            Damit ist das Ding aber nicht mehr bündig in der Flucht. Bevor jetzt jemand mit negativem margin ankommt: nein, nicht den Platz für den Rahmen mit transparentem border reservieren, sondern verwenden, was gar keinen Platz benötigt: outline (oder box-shadow).

            Aber @michaah ist ja inzwischen vom Rahmen um die Bilder abgekommen – vielleicht auch besser so.

            Denk immer dran, auch :focus für die Tastaturbedienung anzusprechen!

            Gut, dass du’s sagst. Wie konnte ich das diesmal nur vergessen zu erwähnen‽

            🖖 Stay hard! Stay hungry! Stay alive! Stay home!

            --
            Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)