При наведении на .navbar-list>li
меняют цвет только векторы и задний фон li
, но сама ссылка остается черной, помогите пожалуйста.
Код:
#navbar {
position: absolute;
width: 100px;
height: 100%;
left: 0px;
top: 0px;
}
.navbar-list {
position: absolute;
width: 100px;
height: 486px;
left: 5px;
top: 100px;
}
.navbar-list li {
width: 100px;
height: 65.67px;
left: 0px;
text-align: center;
list-style-type: none;
display: block;
align-items: center;
transition: 1s all ease;
margin: 20px 0 0 0;
padding: 10px 0 0 0;
}
.navbar-list li:hover {
background: #83295E;
border-radius: 5px;
color: white;
}
i {
font-size: 40px;
}
.navbar-list a {
display: block;
width: 100px;
height: 18px;
left: 0px;
top: 538px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 19px;
color: #000000;
}
<div class="navbar-list">
<li>
<i class="far fa-user"></i>
<a href="#">Профиль</a>
</li>
<li>
<i class="fas fa-journal-whills"></i>
<a href="#">Курсы</a>
</li>
<li>
<i class="fas fa-hashtag"></i>
<a href="#">Инста-тренер</a>
</li>
<li>
<i class="fas fa-torah"></i>
<a href="#">Задания</a>
</li>
<li>
<i class="fas fa-ban"></i>
<a href="#">Хочешь бан?</a>
</li>
<li>
<i class="fas fa-sitemap"></i>
<a href="#">Реф.система</a>
</li>
<li>
<i class="far fa-life-ring"></i>
<a href="#">Помощь</a>
</li>
</ul>
</div>
</nav>