Перейти к содержимому


При Наведении Курсора Меняется Картинка


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 ipodushkin

ipodushkin

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 496 сообщений
  • ГородМосква

Отправлено 01 Август 2015 - 17:17

Здравствуйте.
Нужно чтобы при наведении на иконку социальной сети она становилась другого цвета. По идее надо поставить на hover в css другую картинку, но чего-то с кодами у меня не выходит. Для каждой кнопки новый класс создавать?

Так выглядят кнопки в html
<div class="but">
<a class= href="#"><a href="https://www.facebook.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}facebook.png" width="35" height="35"></a>
<a class= href="#"><a href="http://instagram.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}instagram.png" width="35" height="35"></a>
<a class= href="#"><a href="http://*.ru/feedback" target=" _blank"><img src="{ASSETS_IMAGES_PATH}email.png" width="35" height="35"></a>
<a class= href="#"><a href="https://twitter.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}twitter.png" width="35" height="35"></a>

</div>

Прошу помощи. Аккаунт sl 230350

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 394 сообщений

Отправлено 01 Август 2015 - 18:17

Просмотр сообщенияipodushkin (01 Август 2015 - 17:17) писал:

Здравствуйте.
Нужно чтобы при наведении на иконку социальной сети она становилась другого цвета. По идее надо поставить на hover в css другую картинку, но чего-то с кодами у меня не выходит. Для каждой кнопки новый класс создавать?

Так выглядят кнопки в html
<div class="but">
<a class= href="#"><a href="https://www.facebook.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}facebook.png" width="35" height="35"></a>
<a class= href="#"><a href="http://instagram.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}instagram.png" width="35" height="35"></a>
<a class= href="#"><a href="http://*.ru/feedback" target=" _blank"><img src="{ASSETS_IMAGES_PATH}email.png" width="35" height="35"></a>
<a class= href="#"><a href="https://twitter.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}twitter.png" width="35" height="35"></a>

</div>

Прошу помощи. Аккаунт sl 230350

Здравствуйте. У Вас код немного неправильный. Там идет тэг <a> а затем еще тэг <a>, причем один из них не закрывается. Что касаемо вопроса, то да, задавать свой класс для каждой иконки.

#3 ipodushkin

ipodushkin

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 496 сообщений
  • ГородМосква

Отправлено 01 Август 2015 - 19:11

Просмотр сообщенияMikDark (01 Август 2015 - 18:17) писал:

Здравствуйте. У Вас код немного неправильный. Там идет тэг <a> а затем еще тэг <a>, причем один из них не закрывается. Что касаемо вопроса, то да, задавать свой класс для каждой иконки.

А можете поподробней подсказать?

#4 Danil

Danil

    Активный участник

  • Модераторы
  • 4 645 сообщений

Отправлено 01 Август 2015 - 19:28

Просмотр сообщенияipodushkin (01 Август 2015 - 19:11) писал:

А можете поподробней подсказать?
В шаблоне html найдите код
<div class="but">
	<a class= href="#"><a href="https://www.facebook.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}facebook.png" width="35" height="35"></a>
	<a class= href="#"><a href="http://instagram.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}instagram.png" width="35" height="35"></a>
	<a class= href="#"><a href="http://*.ru/feedback" target=" _blank"><img src="{ASSETS_IMAGES_PATH}email.png" width="35" height="35"></a>
	<a class= href="#"><a href="https://twitter.com/*" target=" _blank"><img src="{ASSETS_IMAGES_PATH}twitter.png" width="35" height="35"></a>

</div>
и замените на
<div class="but">
<a href="https://www.facebook.com/*" target=" _blank"><span class="facebook"></span></a>
<a href="http://instagram.com/*" target=" _blank"><span class="instagram"></span></a>
<a href="http://*.ru/feedback" target=" _blank"><span class="email"></span></a>
<a href="https://twitter.com/*" target=" _blank"><span class="twitter"></span></a>
</div>
В конец main.css добавьте код
.facebook, .instagram, .email, .twitter {width:35px;float:left;display:block;height:35px;margin:3px;}
.but a span.facebook {bakcground:url("{ASSETS_IMAGES_PATH}facebook.png");}
.but a span.instagram {bakcground:url("{ASSETS_IMAGES_PATH}instagram.png");}
.but a span.email {bakcground:url("{ASSETS_IMAGES_PATH}email.png");}
.but a span.twitter {bakcground:url("{ASSETS_IMAGES_PATH}twitter.png");}
.but a:hover span.facebook {bakcground:url("{ASSETS_IMAGES_PATH}Название изображения при наведении");}
.but a:hover span.instagram {bakcground:url("{ASSETS_IMAGES_PATH}Название изображения при наведении");}
.but a:hover span.email {bakcground:url("{ASSETS_IMAGES_PATH}Название изображения при наведении");}
.but a:hover span.twitter {bakcground:url("{ASSETS_IMAGES_PATH}Название изображения при наведении");}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных