Иконки соцсетей, при наведении меняющие цвет

(Ответов: 3, Просмотров: 2424)
  1. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    Добрый день всем. Задача проста: нужно, чтобы при наведении иконка соцсети, по совместительству ссылка, изменилась на другую. Существует метод, на основе которого это делается. Создаем ссылку, присваиваем класс:

    Код 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)
           }
    Так как у меня адаптивная верстка, то задавать фиксированный размер я не могу. Но при указании размера в любых других единицах картинки не хотят отображаться. Существует ли решение для этого случая или есть другой, но создающий тот же эффект?
    • 0
  2. Разработка любых сайтов Аватар для ArhStrAngeR
    • Регистрация: 08.06.2011
    • Сообщений: 3,376
    • Записей в дневнике: 1
    • Репутация: 2505
    Sperc, суть ответа весьма похожа на вашу прошлую проблему. Делайте спрайтом и запихивайте изображение в размеры нужного блока
    • 0
  3. Дипломник Аватар для Sperc
    • Регистрация: 19.01.2013
    • Сообщений: 107
    • Репутация: 3
    • Webmoney BL: ?
    Решение найдено. Кому интересно, это делается при помощи кода

    Код 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%;
    }
    • 0
  4. Студент
    • Регистрация: 11.11.2014
    • Сообщений: 32
    • Репутация: 0
    Только события мыши отдельно в js файл лучше вынести, думаю.
    Разработка и обслуживание сайтов на системе MODx http://mrwadson.ru.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Поддерживает ли Яндекс такой код иконки?
Yandex 4 02.09.2013 12:33
Иконки для сайта игровой тематики
Дизайн сайтов, графика 0 07.03.2012 01:43
Цвет текста и фона при наведении на кнопку
Web программирование 1 14.02.2012 03:31
Новогодние иконки для блога
Дайджест блогосферы 0 25.11.2010 17:33

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры