0

Есть блок

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

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

1 ответ 1

2

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

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.