Почему не меняется цвет ссылки при наведении

215

12 мая 2019, 21:20

Есть блок

<li><a href="">Товары</a></li>

и его стили

.firstlvl li {
    display: inline-block;
    width: 146px;
    height: 22px;
    text-align: left;
    padding: 3px 0 0px 8px;
}
.firstlvl li:hover {
    background: #1cb7c9;
    color: #ffffff;
}

При наведение мышкой весь блок li правильно меняет цвет на #1cb7c9; , а вот ссылка внутри не реагирует, как это исправить. ЗЫ. мне нужно чтобы ссылка меняла цвет именно при наведение на элемент li, а не на a. Правило

.firstlvl a:hover {
        color: #ffffff;
    }

Мне не подходит.

Answer 1

Очень просто:

.firstlvl li { 
    display: inline-block; 
    width: 146px; 
    height: 22px; 
    text-align: left; 
    padding: 3px 0 0px 8px; 
} 
 
.firstlvl li:hover a { 
    background: #1cb7c9; 
    color: #ffffff; 
}

<ul class="firstlvl"> 
    <li> 
        <a href="#">Товары 1</a> 
    </li> 
    <li> 
        <a href="#">Товары 2</a> 
    </li> 
    <li> 
        <a href="#">Товары 3</a> 
    </li> 
    <li> 
        <a href="#">Товары 4</a> 
    </li> 
</ul>