Ответы пользователя по тегу CSS
  • Как применить css hover к иконкам?

    llexa
    @llexa
    Примерно так:
    <a href="#" class="isnta"></a>
    .isnta { display: inline-block; width: 16px; height: 16px; background: url('/images/isnta.png') 0 0 no-repeat; }
    .isnta:hover { background: url('/images/isnta_hover.png') 0 0 no-repeat; }


    А вот так еще красивее:
    <a href="#" class="ico ico_isnta">Instagram</a>
    <a href="#" class="ico ico_youtubecom">Youtube</a>

    .ico { display: inline-block; width: 16px; height: 16px; overflow: hidden; text-indent: -300em; }
    .ico_isnta { background: url('/images/isnta.png') 0 0 no-repeat; }
    .ico_isnta:hover { background: url('/images/isnta_hover.png') 0 0 no-repeat; }
    .ico_youtubecom { background: url('/images/youtubecom.png') 0 0 no-repeat; }
    .ico_youtubecom:hover { background: url('/images/youtubecom_hover.png') 0 0 no-repeat; }


    Ну и напоследок советую нарезать все иконки в спрайт и при ховере менять их позицию, чтобы избежать моргания.
    Ответ написан