Hoverfunktion wird nicht angezeigt

[Gunnar Bittersmann]

@@Maximillian

ich habe 2 Navigationen je ein Div

Das sollten nav-Elemente sein.

wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr.

Kann ich nicht nachvollziehen. Link zur Seite?

Dein HTML weist außer dem bereits genannten noch weitere Fehler auf:

Die meta viewport-Angabe fehlt.

  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>

href="javascript:void(0);" ist ein sicheres Indiz dafür, dass das a-Element falsch ist. Links führen zu einem Ziel: einer anderen Seite bzw. einem anderen Bereich auf der aktuellen Seite.

Für Aktionen auf der Seite (z.B. Auf-/Zuklappen von Inhalten) sind buttons zu verwenden.

Außerdem muss jedes interaktive Element eine Beschriftung (Text) haben. Deins hat keinen Inhalt; „Menü“ wäre hier angebraxcht. Evtl. kannst du die Beschriftung visuell verstecken; aber sie muss vohanden sein – für Nutzer, die deine Seite nicht visuell wahrnehmen.

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

Es ist nicht sinnvoll, dass Element myLinks bei jedem Aufruf der Eventhandlerfunktion erneut im DOM zu suchen. Das tut man besser einmalig, also außerhalb der Funktion.

Mal abgesehen davon, dass du hier den bedingten Operator hättest verwenden können, ist es grundsätzlich nicht besonders gut, Stileigenschaften direkt mit JavaScript zu ändern. (Das ist allerdings „schwer…in die Köpfe der Menschen zu bringen“.)

Statt style.display zu ändern, bietet es sich an, das hidden-Attribut zu setzen bzw. zu löschen.

Außerdem kann mit einem ARIA-Attribut aria-expanded der jeweilige Zustand des Toggle-Buttons angezeigt werden.

Das alles kannst du dir in diesem Codepen ansehen, mit Erklärungen darin.

Und hier habe ich noch ein responsives Menü, wo die Links nicht gedoppelt werden. Erklärung dazu.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!