:hover makiert Text anders

Simuletsplay

Hallo Zusammen!

Ich habe ein kleines CSS Problem:

Code

nav{     width: 100%;
     margin: 0;
     border-bottom: 3px solid #202833;
     background: #202833;
     color: #808893;
}
nav ul a {
    display: block;
}
nav ul {
    width: 0 auto;
    margin: 0;
    padding: 0 auto;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
	float: right;
	margin-right: 5px;
}
nav ul li {
    background: #202833;
    display: inline-block;
	font-family: arial;
	text-decoration: bold;
}
nav ul li :hover {
   color: #5cbc7c;
}
nav ul li a {
    color: #808893;
    text-decoration: none;
    display:block;
    padding: 15px;
}
nav ul li ul {
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 300ms all;
  max-height: 0;
}
nav ul li ul li {
  border-bottom: 1px solid #8c1e31;
}
nav ul li:hover > ul {
  max-height: 700px;
}
#logout{
	background-color: #e05447;
	color: white;
}
#logout a{
	color: white;
}
#logout:hover{
	background-color: #9c3c33;
	color: white;
}
#logout:hover > a{
	color: white;
}

Alles anzeigen

HTML

<nav>         <ul>		    <li><a href="news.html"><i class="fa fa-envelope-open-o"><b></i> News</b></a>            <li id="logout"><a href="index.html"><i class="fa fa-sign-out"></i><b> Log-Out</b></a>				 </ul>      </nav>

Doch Wenn ich über Logout fahre (mit der Maus), wird der Hintergrund dunkelrot, aber der Text wird grün, allerdings auch nur, wenn ich mit der Maus über dem Text bin! Komisch ist dabei, dass wenn ich über den Text fahre, der grün wird, allerdings das "Icon" dazu nicht.... Aber fahre ich über das "Icon", passiert es genau andersrum: Der Text bleibt weiß und das "Icon" färbt sich...

Wäre nett, wenn mir jemand sagen kann, wo der Fehler liegt!

_____________________
MfG

Simuletsplay

PS: nicht wundern - zum schluss im CSS-Teil habe ich ein wenig herumprobiert!

basti1012

Wie soll es den aussehen ?? So das beim hovern die Links grün werden
Zb gibst du oben beim hovern den Link eine grüne Farbe.
Ganz unten hovers du den logout und gibst den link wieder eine weiße farbe.

Dann hast du in html deine <li> gar nicht geschlossen und das macht sowieso verwirrung.

PS: Wenn man Flexbox benutzt kann man in dein fall auch float:right verzichten , dazu gibt es zb flex-end

Simuletsplay

Wenn ich die <li> schließe, bleibt zwischen den <li> immer ein wenig Platz (schätze 1 bis 2 px)
[HR][/HR]
Nein... Bei hover soll der Text weiß bleiben

basti1012

ja gut dann brauchs du bei meinen Beispiel ja nur noch Farbe ändern. und wie du siehst sind da auch keine Abstände zwischen (1-2 px ).
Selbst wenn mußt du kucken wo der Abstand her kommt.
meistens reicht ein

Code

*{
margin:0;
padding:0;
}

an anfang der caa schon aus damit solche kleine verschiebungen verschwinden.
Wenn nicht dann mach mal ein codepen fertig mit dein Problem weil ich bei mir den Fehler nicht sehen kann.

Solche Fehler mit nicht Validen html zu beheben ist auch nicht sinn der sache.
Tags die man schließen kann sollte man auch schließen, dafür sind sie ja auch da

- - - Aktualisiert - - -

ja gut dann brauchs du bei meinen Beispiel ja nur noch Farbe ändern. und wie du siehst sind da auch keine Abstände zwischen (1-2 px ).
Selbst wenn mußt du kucken wo der Abstand her kommt.
meistens reicht ein

Code

*{
margin:0;
padding:0;
}

an anfang der caa schon aus damit solche kleine verschiebungen verschwinden.
Wenn nicht dann mach mal ein codepen fertig mit dein Problem weil ich bei mir den Fehler nicht sehen kann.

Zitat von Simuletsplay

Wenn ich die <li> schließe, bleibt zwischen den <li> immer ein wenig Platz (schätze 1 bis 2 px)
[HR][/HR]

Solche Fehler mit nicht Validen html zu beheben ist auch nicht sinn der sache.
Tags die man schließen kann sollte man auch schließen, dafür sind sie ja auch da

Simuletsplay

basti1012 Dein code bei codepen funktioniert bei mir nicht!

Es ist genauso wie vorher!

basti1012

Dann lösch mal deine Cache. Wenn es bei Codepen selber geht ,dann wird es wohl an der Cache liegen oder das drunter rum was du da noch alles hast. Kannst du mal Link zur Seite posten ? Oder kommpletten Code ?

Simuletsplay

Noch liegt die Seite bei mir lokal!

basti1012

dann nimm mal dein Code und teste den mal bei codepen ob der Fehler da auch ist. Fals nein dann liegt es wo anders dran ,zb Cache. Fals es da auch nicht geht speicherst du das problem da ab und postest den Link hier mal rein .

Simuletsplay

https://codepen.io/anon/pen/JeLQda

Arne Drews

Du darfst kein Leerzeichen machen vor dem einleitenden Doppelpunkt von hover

Code

nav ul li :hover { color: #5cbc7c; }

Das bedeutet, so wie es da steht, dass das hover für jedes einzelne Element in nav ul li separat angewendet werden soll.
Du möchtest in diesem Fall aber quasi, dass alle Elemente in nav ul li gleichzeitig auf das :hover reagieren:

Code

nav ul li:hover * { color: #5cbc7c; }

Simuletsplay

Dankeschön!

Hat super funktioniert!
[HR][/HR]Simuletsplay

Thema ist hiermit beendet!