:hover makiert Text anders

1. offizieller Beitrag

    Hallo Zusammen!

    Ich habe ein kleines CSS Problem:

    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!

    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

    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

    • Offizieller Beitrag

    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; }