Css nie działa zmiana koloru fonta przy :hover

0

Witam,
pisze taką stronkę w celach hobbistycznych, żadnym specjalistą nie jestem. Pewnie dlatego mam problem a mianowicie nie działa mi po najechaniu na przycisk zmiana koloru fonta, background już działa. Próbowałem dodać !important ale nic nie zmienia w temacie. Prosił bym o poradę w tej sprawie.
Pozdr

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu {
    display: inline-block;
    margin-left: calc(50% - 50px);
    margin-top: calc(20% - 50px);
    font-size: 21px;
   
}

nav ul li a {
    display: block;
    list-style: none;
    text-decoration: none;
    color: white;

    text-transform: uppercase;
}

.menu .start {
  

    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background-color: red;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    line-height: 250px;
    text-align: center;
    
}

.menu .folio {
    position: relative;
    left: 106px;
    top: -200px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background-color: red;
   
    width: 200px;
    height: 200px;
    text-align: center;
}

.menu .about {
    position: relative;
    left: -106px;
    top: -400px;
    width: 200px;
    height: 200px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background-color: red;
}

.menu .contact {
    position: relative;
    top: -394px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 200px;
    height: 200px;
    background-color: red;
    line-height: 150px;
    text-align: center;

}

/* icons */
nav ul li a i {
    position: absolute;
    padding-left: 30px;
    padding-top: 15px;
    font-size: 24px;
}

nav ul li:nth-child(1) a i {
    padding-left: 18px;
    padding-top: 80px;
}

nav ul li:nth-child(2) a i {
    padding-left: 45px;
    padding-top: 35px;

}

nav ul li:nth-child(3) a i {
    padding-left: 25px;
    padding-top: 37px;

}

nav ul li:nth-child(4) a i {
    padding-left: 30px;
    padding-top: 32px;

}

/*  */
/* a position */

nav ul li:nth-child(1) a {
    padding-left: 0px;
    padding-top: 10px;
}

nav ul li:nth-child(2) a {
    padding-left: 3px;
    padding-top: 55px;

}

nav ul li:nth-child(3) a {
    padding-left: 62px;
    padding-top: 53px;

}

nav ul li:nth-child(4) a {
    padding-left: 5px;
    padding-top: -10px;

}

/*  */
/* hover */
.folio:hover {
    background-color: yellow;
    color: black;
}

<body>
    <nav class="menu">
        <ul>
            <li class="start"><a href="#"><i class="fas fa-home"></i>Start</a></li>
            <li class="folio"><a href="#"><i class="fas fa-briefcase"></i>Portfolio</a></li>
            <li class="about"><a href="#"><i class="far fa-newspaper"></i>O mnie</a></li>
            <li class="contact"><a href="#"><i class="fas fa-users"></i>Kontakt</a></li>
        </ul>
    </nav>
</body>
2

Bo domyślny styl dla a jest ważniejszy. Spróbuj dać hover na .folio > a:hover

0

dzięki wielkie za odpowiedź działa. Byłem pewien( do teraz) że klasa i pseudo klasa stoją wyżej w hierarchii niż samo "a".
Pozdr

1 użytkowników online, w tym zalogowanych: 0, gości: 1