Как применить css hover к иконкам?

Есть социальные иконки на сайте. необходимо при наведении на них, чтобы иконки менялись. Иконки есть. Код файла:

<a href="#"><img src="/images/isnta.png"></a>
 <a href="#"><img src="/images/youtubecom.png"></a>
 <a href="#"><img src="/images/google.png"></a>
 <a href="#"><img src="/images/fb.png"></a>
 <a href="#"><img src="/images/tw.png"></a>


Код css:
Тут надо подумать. Для каждой иконки я делал class типа
<a href="#"><img src="/images/isnta.png" class="insta"></a>

В css писал:

.inst img:hover{
background: url(images/insta_b.png);
}


Но результата нет :(
Наверное, я изобретаю велосипед. Помогите.
  • Вопрос задан
  • 4607 просмотров
Решения вопроса 1
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; }


Ну и напоследок советую нарезать все иконки в спрайт и при ховере менять их позицию, чтобы избежать моргания.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
у вас неверный код, вот как нужно:
img.insta:hover{
background: url(images/insta_b.png);
}


Т.е. выбирается img с классом insta, в вашем же варианте вы выбираете все img, находящиеся в элементе с классом inst.
Ответ написан
@Kuzzy
Вы пытаетесь менять бэкграунд у картинки :) Так не получится.
Уберите картинку из хтмл, класс вешайте на ссылку и через бэкграунд указывайте нужную картинку:
<a href="#" class="inst"></a>
a {
    display: inline-block;
    height: 16px; //Тут задаем размеры иконки 
    width: 16px;
}
 .inst {
     background: url(images/insta.png) no-repeat 0 0;
}
.inst:hover {
    background: url(images/insta_b.png) no-repeat 0 0;
}
</a>

Можно еще собрать все иконки в один спрайт и менять состояние меняя background-position, но это уже следующий левел.
Ответ написан
Kaaboeld
@Kaaboeld
Web-разработчик
Так и не выйдет попробуйте например так:

css-код:
.inst a{
display:inline-block; /*делаем ссылку "не строчным" элементом - подробности в документации*/
width:20px; /*ширина иконки*/
height:20px; /*высота иконки*/
background:url(/images/isnta.png);
}
.inst a:hover{
background:url(images/insta_b.png);
}


html-код
<div class='inst'>
<a href="#"></a>
...
</div>
Ответ написан
RadiationX
@RadiationX
Front-End разработчик
Если использовать эффект полу-прозрачности, то вполне можно просто задать opacity.
a img{
opacity:0.5;
}
a:hover img{
opacity:1;
}

При это можно оставить ваш нынешний код.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы