Wolf: Aufgeblendete Elemente können nicht ausgewählt werden

Hallo

wie kann ich in dem Beispiel nach dem Klick auf "Menu" die dann angezeigten links auswählen?

  1. hallo

    Hallo

    wie kann ich in dem Beispiel nach dem Klick auf "Menu" die dann angezeigten links auswählen?

    1. schliesse deinen Code in ein <nav> Elment ein
    2. mache dein h1 fokusierbar mit tabindex
    3. CSS

    nav:focus-within mydir {display:block}

    btw h1 ist sehr wahrscheinlich eine dumme Wahl.

    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. @@beatovich

      mache dein h1 fokusierbar mit tabindex

      Nein.

      Es genügt nicht, wenn ein Element interaktiv gemacht wird. Das müsste auch bekannt gemacht werden – role="button".

      Man kann aber nicht <h1 role="button"> setzen, da das Ding dann keine Überschrift mehr ist.

      btw h1 ist sehr wahrscheinlich eine dumme Wahl.

      So isses.

      Wenn man einen Button will, dann will man einen <button>.

      Und wenn’s wirklich eine Überschrift sein soll, dann sollte <h1><button>Menü</button></h1> gehen.

      Aber wenn’s wirklich eine Überschrift sein soll, dann sicher keine erster Ordnung, also keine h1.

      Und wenn der Button keine Hintergrundfarbe und keinen Rand haben soll – dafür gibt’s CSS.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @Gunnar

        Hi,

        mit Deinem Vorschlag <h1><button>Menü</button></h1> (geändert in <h2><button>Menü</button></h2>), was muss ich dann in der CSS ändern?

    2. @beatowich

      Hi,

      Danke für den Tipp. Offensichtlich habe ich es falsch realisiert, denn es geht nach wie vor nicht.

      Gruß Wolf

      1. Hallo Wolf,

        es fehlt auf jeden Fall im CSS ein . vor dem mydir in der letzten Regel (mydir ist eine Klasse, kein Element), deswegen greift focus-within nicht.

        Dass Du beim hovern nicht ins Menü kommst, liegt daran, dass es eine Lücke zwischen den Boxen von h2 und .mydir gibt. Deswegen endet der :hover von h2, bevor Du in das Popup-Menü kommst.

        Es gibt mehrere Lösungen:

        • Du verschiebst den :hover auf das nav-Element (und passt das CSS entsprechend an)
        • Du verschiebst das Popup in das h2 hinein, so dass der :hover Zustand des h2 nicht verloren geht
        • Du beseitigst die Margins um das h2 und fügst den Selektor .mydir:hover zur Liste der Selektoren für den display:flex hinzu. Dann sitzen h2 und .mydir pixelgenau aneinander und der hover geht nahtlos vom einen zum anderen über.

        Übrigens solltest Du Dir klar werden, welchen display-Mode Du willst. flex? inline-flex? block? Dein Mischmasch führt aktuell zu den merwürdigen Umformatierungen. Gleichzeitige Angabe von flex und inline-flex auf einem Element hat übrigens die Wirkung, dass der letzte gewinnt; in deinem Fall also inline-flex für die div.mydir Regel.

        Rolf

        --
        sumpsi - posui - clusi
        1. Hallo, ich gebs auf, es ist nur eine Herumprobiererei, da ich zu wenig Ahnung habe von CSS. Ich danke Euch für Eure Hilfe, Gruß Wolf