Mit :hover einen Text einblenden

[Gunnar Bittersmann]

@@Jana

Danke für eure Antworten. Jetzt habe ich meinen Fehler beim Hover und insgesamt beim img-tag verstanden, danke. Wie müsste ich meinen Body strukturieren, wenn ich 'X' beim mouseover über 'Asien' anzeigen wollen würde?

Was für den Hovereffekt ginge:

<a href='Asien/Asien.html'>
  <img src='Bilder/Stecker.png' alt='Asien' id='Asien'>
  <div id='X'> Test </div>
</a>

#Asien:hover + #X {display: block}

Durch den +-Kombinator wird ‚X‘ als unmittelbar nachfolgendes Geschwisterelement des gehoverten ‚Asien‘ selektiert. (Der ~-Kombinator ginge auch; das selektiert auch weiter entfernte Geschwisterelemente. )

Aber nein, so nicht machen!

Wie schon erwähnt gibt es ja nicht nur Mäuse; etliche Nutzer verwenden die Tastaur (Pfeiltasten, Tab-Taste, …). Dabei geraten Elemente in den Fokus, was sich in CSS mit der Pseudoklasse :focus nutzen lässt. Faustregel: Was du für :hover tust, mach auch für :focus. (Es sei denn, man macht für :focus etwas Anderes, Auffälligeres.)

In den Fokus geraten aber nur interaktive Elemente – img ist keins; a aber ist eins. Also dem a-Element die ID gegeben und dann:

<a href='Asien/Asien.html' id='Asien'>
  <img src='Bilder/Stecker.png' alt='Asien'>
  <div id='X'> Test </div>
</a>

#Asien:focus #X, #Asien:hover #X {display: block}

---

Auf die Idee, es in das title-attribut zu legen bin ich garnicht gekommen, kann mir es aber auch nicht vorstellen, wie und wieso ich es dorthin schreiben könnte, kannst du mir das vielleicht erklären?

<a href='Asien/Asien.html' title='Test'>
  <img src='Bilder/Stecker.png' alt='Asien'>
</a>

Aber der Tooltip erscheint ausschließlich bei Mausbenutzung. “If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute”, warnt Steve Faulkner

Das title-Attribut kann also nur für Informationen eingesetzt werden, die nicht unbedingt erforderlich sind. Dann stellt sich aber die Frage, warum man sie überhaupt für einige Nutzer anbieten sollte.

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