Maximillian: Hoverfunktion wird nicht angezeigt

Beitrag lesen

SELF-Forum

Hoverfunktion wird nicht angezeigt

Maximillian
– Informationen zu den Bewertungsregeln

Hallo,

ich bin hier neu, hoffe mein Beitrag ist richtig eingeordnet.

Ich möchte keinen Baukasten für eine private Homepage nutzen sondern selbst eine seite mit Dreamweaver gestalten.

Nun klemme ich an der Navigation fest.

Mein Problem:

ich habe 2 Navigationen je ein Div

im Desktop view wird das eine ausgeblendet im mobilen View das andere.

Die Mobile Navigation funktioniert im "Global view" einwandfrei, nur wenn ich diese Navigation nur im mobilen zulasse und im Globalen ausblende funktioniert die a:hover nicht mehr.

Vielen Dank für die Hilfe!

@charset "UTF-8";

.topnav {
    display: none;
}
/* CSS Document */
 

@media (max-width:450px){
	
	 /* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: #f4f5e7;
    position: relative;
    display: block;
}
.desktopmenue {
    display: none;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
    background-color: #9AAABB;
}
.topnav #myLinks a:hover {
    background-color: #FFFFFF;
}

/* Style navigation menu links */
.topnav a {
    color: #F4F5E7;
    padding-top: 14px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 14px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
    background-color: #163960;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 16px;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
    background-color: #9aaabb;
    color: #0c2949;
}

/* Style the active link (or home/logo) */
.active {
    background-color: #0C2949;
    color: #F4F5E7;
} 

}


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<link href="subtestmobil.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">	

</head>

<body>
	
	  <div class="desktopmenue">menue desktop view</div>
<div class="topnav">
  <a href="#home" class="active">Maximillian</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <!-- "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>
</div>
	<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln