Linkelement ein-/ausblenden

[JL]

Hallo,

mein Vorhaben: Ich versuche, jetzt schon mit Verzweiflung, mit "hover" ein Linkelement einzublenden.

Hier meine Zeilen:

<style type="text/css">

.link {
BORDER: #BF1528 1px solid;
WIDTH: 180px; 
BACKGROUND: #ffffff; 
FONT-WEIGHT: 700;
MARGIN: 5px 0px; 
DISPLAY: block; 
COLOR: #BF1528;
LETTER-SPACING: 1px;
POSITION: RELATIVE;
LEFT: 10px; 
Font-Size: 10px;
font-family:Verdana;
FONT-WEIGHT: 700;
text-align: center;
 PADDING: 5px; 
}

.link fehler {
}

.link fehlerA{
display: none;
}

.link.fehler:hover {	
POSITION: relative; 
COLOR: #BF1528;
LEFT: -3px; 
LETTER-SPACING: 2px; 
TOP: 0px;
BACKGROUND-COLOR: #BF1528;
BORDER: #FFF 0.1px solid;
Font-Size: 12px;
WIDTH: 210px; 
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
}

.link.fehlerA:hover{
POSITION: relative; 
COLOR: #BF1528;
LEFT: -3px; 
LETTER-SPACING: 2px; 
TOP: 0px;
BACKGROUND-COLOR: #BF1528;
BORDER: #FFF 0.1px solid;
Font-Size: 12px;
WIDTH: 210px; 
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
}

.link.fehler:hover .link fehlerA{
display: none;
}

</style>

<a class="link fehler" href="#">Fehlerhandling</a> 
<a class="link fehlerA" href="#">Fehlerhandling</a> 
<a class="link fehlerA" href="#">Ansprechpartnernavi</a> 

Ich vermute, hier liegt mein Fehler?

.link.fehler:hover .link fehlerA{
display: none;
}

Ahoi Jörg

[Matthias Apsel]

Hallo JL,

Es gibt kein Element fehlerA.

Bis demnächst
Matthias

[Jörg Laude]

Hallo Matthias,

vielen ank für deine Antwort.

Ich dachte, dieses hier wäre eins:

.link fehlerA{ display: none; }

Ahoi Jörg

[Gunnar Bittersmann]

@@Jörg Laude

.link fehlerA{
display: none;
}

fehlerA selektiert alle Elemente des Typs fehlerA, d.h. alle <fehlerA>. Es gibt keine solchen.

Wenn du alle Elemente der Klasse fehlerA selektieren willst: Klassenselektor.

LLAP 🖖

PS: Könntest du dir bitte angewöhnen, Code als solchen zu kennzeichnen? </>-Button überm Eingabefeld; Formatierung > Code

[Gunnar Bittersmann]

@@JL

mein Vorhaben: Ich versuche, jetzt schon mit Verzweiflung, mit "hover" ein Linkelement einzublenden.

Da steckt schon der erste Fehler, bevor es überhaupt um Code geht.

Längst nicht alle Nutzer verwenden eine Maus (oder ein anderes Zeigegerät). Manche verwenden die Tastatur, andere Touch. Etwas, das nur bei Hover erscheint, erscheint für viele überhaupt nicht. (Je nach Zielgrppe kann man auch getrost sagen: für die meisten nicht.)

Zumindest wäre alles, was du für :hover zu tun gedenkst, auch für :focus (bzw. :focus-within?) zu tun.

Ich werd auch nicht ganz schlau, was du eigetlich vorhast. Kannst du das mal beschreiben?

---

.link {
BORDER: #BF1528 1px solid;
WIDTH: 180px; 
BACKGROUND: #ffffff; 
FONT-WEIGHT: 700;
MARGIN: 5px 0px; 
DISPLAY: block; 
COLOR: #BF1528;
LETTER-SPACING: 1px;
POSITION: RELATIVE;
LEFT: 10px; 
Font-Size: 10px;
font-family:Verdana;
FONT-WEIGHT: 700;
text-align: center;
 PADDING: 5px; 
}

• Konsequente Kleinschreibung macht den Code besser lesbar.
• font-weight ist doppelt angegeben.
• Verdana? Ernsthaft? Da gibt’s sicher bessere Alternativen. Apropos Alternativen: Es sollte eine generische Schriftart angegeben sein: font-family: Verdana, sans-serif.

LLAP 🖖

[Jörg Laude]

Hallo Gunnar, vielen Dank für deine Antwort. Ich möchte mit hover über das Element "link fehler" das Element "link fehlerA" einblenden. Die Positionierung folgt dann noch.

Ahoi Jörg

[Gunnar Bittersmann]

@@Jörg Laude

Ich möchte mit hover über das Element "link fehler" das Element "link fehlerA" einblenden. Die Positionierung folgt dann noch.

Es gibt Kombinatoren für nachfolgende Geschwister ~ und für das nächste Geschwisterelement +.

Um also abhängig vom Hover-Zustand eines .fehler-Elements ein Geschwisterelement .fehlerA zu stylen:

.fehler ~ .fehlerA {…}

bzw.

.fehler + .fehlerA {…}

Das ist aber in deinem Fall komplett sinnfrei, da man den Link .fehlerA niemals erreichen kann. In dem Moment, wo man sich von .fehler wegbewegt, verliert er den Hover-Status und damit verschwindet .fehlerA wieder.

Auch für Mausschubser nicht bedienbar; von fehlender Tastaturunterstützung ganz zu schweigen.

Du hast imnmer noch nicht gesagt, was du eigentlich vorhast. Und damit meine ich das eigentliche Problem, nicht irgendwas, was du als Lösung dafür ansiehst.

LLAP 🖖

[Jörg Laude]

Ich möchte bei "mouseover" zwei neue Links an Licht bringen. Die sind dann so positioniert sind, dass diese eingeblendeten Links den "Elternlink" überlappen. So sollte der Hover-Status nicht verloren gehen. Anmerken möchte ich, dass ich in einem firmeninternen Intranet unterwegs bin und hier mit vielen Restriktiven leben muss.

Ahoi Jörg

[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

[Rolf B]

Hallo Ingrid,

Nachtrag: ist es so, dass einer der beiden Popups sozusagen inhaltlich identisch ist mit dem Popup-Trigger? Ist es also nötig, dass der Hover-Auslöser verschwindet? Reciht es nicht, den Ansprechpartner-Link einfach bei :hover und :focus des Fehlerhandling-Links einzublenden? Wenn man das halbwegs geschickt und überlappend positioniert (und auf mehreren Device-Größen testet ob's nicht zerrissen wird), müsste das doch reichen. Zu viel Geflimmer und Bling Bling ist für eine Corporate-Anwendung eh unpassend. Ich weiß das. Ich sitze auf einem ähnlichen Stuhl.

Corporate Anwender ticken im Akkord. Da muss alles flott gehen und die Hauptmaximen sind: "DON'T MAKE ME THINK" und "DON'T PLAY FIND-THE-BUTTON WITH ME".

Rolf

[Gunnar Bittersmann]

@@Rolf B

Eine halbwegs vernünftige Lösung entspricht den Komplexitäten eines Dropdown-Menüs und ist bedienbar nur mit JavaScript erreichbar.

Hold my beer… Codepen 2

Womit nicht gesagt ist, dass diese Lösung nun die beste wäre.

Kann man ja auch gar nicht sagen, ohne das Problem zu kennen.

LLAP 🖖

[Gunnar Bittersmann]

@@Jörg Laude

Ich möchte bei "mouseover" zwei neue Links an Licht bringen.

Das ist immer noch das, was du als Lösung des Problems ansiehst. Was ist das Problem?

Die sind dann so positioniert sind, dass diese eingeblendeten Links den "Elternlink" überlappen. So sollte der Hover-Status nicht verloren gehen.

Da irrst du. ☞ Codepen

LLAP 🖖

[Tabellenkalk]

Hallo,

<a class="link fehlerA" href="#">Ansprechpartnernavi</a> 

Ich vermute, hier liegt mein Fehler?

Dein Fehler ist, dass du glaubst, du hättest dem Element a die Klasse "link fehlerA" zugewiesen. Stattdessen weist du zwei Klassen zu.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Dein Fehler ist, dass du glaubst, du hättest dem Element a die Klasse "link fehlerA" zugewiesen. Stattdessen weist du zwei Klassen zu.

… wovon eine unsinnig ist. Alle a-Elemente mit href-Attribut sind Links; eine Klasse um das nochmal auszudrücken ist hyperfluid.

LLAP 🖖

[Jörg Laude]

Hallo Kalk,

Vielen Dank! Ich probiere mal weiter mein Glück mit deinem Hinweis.

Ahoi Jörg

[MudGuard]

Hi,

Ich versuche, jetzt schon mit Verzweiflung, mit "hover" ein Linkelement einzublenden.

Ich frag jetzt mal ketzerisch: Wäre evtl. eine Klick-Lösung statt Hover erlaubt?

Wenn ja: den einen Link in ein Summary-Element, und das zusammen mit den beiden anderen Links in ein Detail-Element?

Dann passiert das Einblenden halt nicht bei Hover, sondern bei Klick.

cu,
Andreas a/k/a MudGuard

[Jörg Laude]

Hallo,

ich danke allen für ihre Gedanken und Zeit. Leider sind Dropdown und Klick keine Option. Ich versuch es mit einem anderen Ansatz.

Ahoi Jörg