Link über mehrere Elemente (orginalthread archiviert)
michaah
Link über mehrere Elemente (orginalthread archiviert)
michaah
Matthias Apsel
Rolf B
JürgenB
Gunnar Bittersmann
Matthias ScharwiesLeider ist der Beitrag auf den ich mich beziehe schon archiviert :(
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.
-
Hallo michaah,
Vor allem verstehe ich nicht warum "Hinweistext" einen Rückmeldung gibt, wenn ich das blaue feld hovere?
weil dein HTML kaputt ist?
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
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 -
Hallo
weil dein HTML kaputt ist?
https://validator.w3.org/nu/?doc=https%3A%2F%2Fac52.de%2Ftest-biglink.html
Gruß
Jürgen-
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.
-
-
-
@@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:hoverstylen, sondern nura:hover. Und wenn du magst, auch die Bilder darin bei gehovertem Link: mit Nachfahrenselektora: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)-
Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
-
...
oder alle vier gemeinsam.
Ganz klar die bevorzugte Version. Klare Rückmeldung so wie ich das will.
Dann darfst du nicht
img:hoverstylen, sondern nura:hover. Und wenn du magst, auch die Bilder darin bei gehovertem Link: mit Nachfahrenselektora: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 vona:hover .adressefunktioniert das jetzt so wie ich das will. Super. Mercie.Eigentlich wollte ich die kaputte Beispielseite belassen, jetzt habe ich sie versehntlich überschrieben, ... sorry ...
-
Nur der Vollständigkeit halber für diejenigen, die vielleicht später mal auf diesen Thread stoßen: Ich lasse jetzt
a:hover imgdoch 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.-
Servus!
Nur der Vollständigkeit halber Ich lasse jetzt
a:hover imgdoch 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-
@@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
marginankommt: nein, nicht den Platz für den Rahmen mit transparentemborderreservieren, sondern verwenden, was gar keinen Platz benötigt:outline(oderbox-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)
-
-
-
-
