[Sperc]

Добрый день всем. Задача проста: нужно, чтобы при наведении иконка соцсети, по совместительству ссылка, изменилась на другую. Существует метод, на основе которого это делается. Создаем ссылку, присваиваем класс:

Код HTML:

<a href="#" class="social"></a>

После чего назначаем такие стили:

Код:

        a.social {
          display:block;
          background: url (/images/social.png)
          width: 50px;
          height: 50px;
       }

       a.social:hover {
           background: url (/images/social2.png)
       }

Так как у меня адаптивная верстка, то задавать фиксированный размер я не могу. Но при указании размера в любых других единицах картинки не хотят отображаться. Существует ли решение для этого случая или есть другой, но создающий тот же эффект?

[ArhStrAngeR]

Sperc, суть ответа весьма похожа на вашу прошлую проблему. Делайте спрайтом и запихивайте изображение в размеры нужного блока

[Sperc]

Решение найдено. Кому интересно, это делается при помощи кода

Код HTML:

<div><img onmouseover="this.src='images/2.png';" onmouseout="this.src='images/1.png';" src="images/1.png"></div>

Назначаем в css

Код:

div img {
   width: 20%;
}

[MrWadson]

Только события мыши отдельно в js файл лучше вынести, думаю.