Bildanzeige während die Maus über auf einen Text steht

[Christian]

Guten Abend!

Ich möchte gerne das wenn ich einen Namen stehen habe und auf diesen mit der Mause fahre, dass ich das Bild dazu angezeigt bekomme, solange ich auf diesem Namen stehe.

Ist das möglich?

Vielleicht kann mir hier jemand sagen wie das funktioniert.

Besten Dank LG

[Gunnar Bittersmann]

@@Christian

Guten Abend!

Ich möchte gerne das wenn ich einen Namen stehen habe und auf diesen mit der Mause fahre, dass ich das Bild dazu angezeigt bekomme, solange ich auf diesem Namen stehe.

Der Name muss dazu in einem eigenen Element stehen, bspw. <span class="name">. Damit das Bild nicht nur per Maus, sondern auch per Tastatur zu sehen ist, wird das Bild mit tabindex-Attribut fokussierbar gemacht: <span class="name" tabindex="0">.

Wenn der Name verlinkt sein soll: <a href="…" class="name">. Da Links schon fokussierbar sind, ist dann kein tabindex-Attribut erforderlich.

In diesem Element ist außer dem Text auch das img-Element, welches aber initial nicht angezeigt wird, sondern erst beim Hovern bzw. Fokussieren des Namens: 1. Zeile im Beispiel

Blöd ist nur, dass das Bild nicht zu sehen ist, wenn sich der Name an der Viewport-Unterkante befindet (Auskommentierung von html { /* padding-top: 100vh */ } entfernen und runterscrollen)

Eine andere Möglichkeit ist, das Bild als Cursor zu verwenden. Da das Bild keine Dekoration, sondern Inhalt ist, gehört es ins Markup. Hier sind style-Attribute dann doch mal sinnvoll: 2. Zeile im Beispiel

LLAP 🖖