CSS Liste

[Gunnar Bittersmann]

@@Lowterm

ich habe folgendes Problem mit einer Liste und hover-Background. Meine Liste sieht wie folgt aus:

[https://codepen.io/Lowterm/pen/RwejEEB]

Hier öffnet sich ein Popupmenu beim hover. Wenn man mit der Maus über einen Link geht, bekommt der Link einen grauen Hintergrund, der so bereit ist wie die li-Elemente.

Nein, bekommt er nicht. Die li-Elemente bekommen beim Hovern den grauen Hintergrund. Und das ist falsch. Wenn man rechts neben dem Link übers li hovert, ändert sich die Hintergrundfarbe, suggeriert also, dass man dort clicken könnte. Tut man das, passiert nichts (weil der Link schmaler ist). Wenn nichts passiert, verlässt man genervt deine Seite.

Was zu tun ist: den Hover-Effekt nicht auf li anwenden (kein interaktives Element), sondern auf a (interaktives Element). Und dann kannst du das für a:focus auch gleich machen.

Wenn die ganze Breite clickbar sein soll, musst du auch das a-Element über die ganze Breite ziehen. display: block oder inline-block sollte dabei helfen.

Links und rechts habe ich wegen "padding: 0px 10px;" bei "bg-white"-Klasse einen weißen Rand von 10px. Ich möchte aber erreichen, dass der Hintergrund bei hover genau so bereist ist, wie das div-Element drum herum. Das heißt, dass bei hover die 10px, sozusagen, überschrieben werden muss.

Dann gib halt nicht dem div links und rechts 10px Padding, sondern dem Element, worauf du den Hovereffekt anwendest (noch li, besser aber a).

🖖 Живіть довго і процвітайте