Linkelement ein-/ausblenden

[Rolf B]

Hallo Jörg,

das ist so einfach nicht. Wenn du zwei Elemente hast, die im DOM benachbart sind, aber sich visuell überlappen, erzeugst Du mit einer :hover Einblendung Flackern. Weil das eingeblendete Element dem gehoverten Element den Hover-Status wegnimmt.

Um das zu lösen, muss das eingeblendete Element KIND des :hover Elements sein, oder es muss selbst auf :hover reagieren (also den Münchhausen machen und sich selbst am Zopf hochhalten).

Mit den Kind-Elementen ist es bei <a> nicht so einfach, weil <a> interaktiv ist. Interaktive Elemente dürfen aber nicht verschachtelt werden.

D.h. du musst die Nachbarversion wählen - aber dann hast Du das Problem mit den ZWEI Elementen. Nur eins davon kann hovern und damit kann sich nur eins selbst festhalten.

Man könnte nun sagen: Okay, das Elternelement ist eh nur ein visueller Fake, relevant sind die beiden Kiddies. Machen wir also aus dem Elternelement ein div, stylen es wie den Link, legen die beiden Popup Links hinein, alles töfte. Nein. Ein div kann vielleicht hovern, soll es aber nicht. div ist nicht interaktiv. Hovering ist eine Interaktion. Die Probleme tauchen auf, wenn Du deine Maus ausstöpselst. Wie kommst Du jetzt an die Popups heran? Ein div kann zwar technisch fokussierbar gemacht werden (gib ihm einen tabindex), das ist aber ein Verstoß gegen die Semantik dieses Elements und es ist auch wieder keine Lösung, sondern ein nur von einer Teilmenge der User bedienbarer Workaround.

Eine halbwegs vernünftige Lösung entspricht den Komplexitäten eines Dropdown-Menüs und ist bedienbar nur mit JavaScript erreichbar. Ist das für Dich gangbar?

Rolf