0

Имеется следующий кусок кода в HTML и его стилизация на CSS:

.footer__social {
    display: inline-block;
}

.footer__fb:hover {color: #09a3f0};
.footer__tw:hover {color: #a4dcf8};
.footer__ins:hover {color: #e53e28};
.footer__drib:hover {color: #df7e44};
<div class="footer__social">
    <ul class="social__list">
        <li><a class="footer__fb" href="#">Facebook</a></li>
        <li><a class="footer__tw" href="#">Twitter</a></li>
        <li><a class="footer__ins" href="#">Instagram</a></li>
        <li><a class="footer__drib" href="#">Dribble</a></li>
    </ul>
</div>

Проблема в том, что первый hover прекрасно работает, а оставшиеся три последних нет. Вроде уже все перепроверил по 10 раз, не пойму в чем причина.

3
  • в точках с запятой не в тех местах
    – teran
    24 дек 2020 в 12:40
  • потому что ; не должны стоять там где Вы их поставили. уберите и всё заработает 24 дек 2020 в 12:40
  • Стыд и позор мне. Не часто пишу CSS-правила в одну строчку, вот и не заметил как точку с запятой поставил после закрывающей фигурной скобки...Спасибо всем ответившим)
    – Nordlicht
    24 дек 2020 в 12:45

1 ответ 1

1

лишнее в css просто не суйте :) (я про ;)

.footer__social {
    display: inline-block;
}

.footer__fb:hover {color: #09a3f0;}
.footer__tw:hover {color: #a4dcf8;}
.footer__ins:hover {color: #e53e28;}
.footer__drib:hover {color: #df7e44;}
<div class="footer__social">
    <ul class="social__list">
        <li><a class="footer__fb" href="#">Facebook</a></li>
        <li><a class="footer__tw" href="#">Twitter</a></li>
        <li><a class="footer__ins" href="#">Instagram</a></li>
        <li><a class="footer__drib" href="#">Dribble</a></li>
    </ul>
</div>

Ваш ответ

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

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