Поменять цвет иконок при наведении

@Slavantos · Регистрация: 29.01.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте! Не могу разобраться со стилями, мне необходимо поменять цвет иконок соц. сетей при наведении в шапке сайта (potolok-krasivo.ru). Необходимо каждой иконке задать свой цвет при наведении.
Заранее благодарю!

@Ademar · 28.12.2018, 17:02

У каждой иконки на этом сайте есть свой класс. Вот для каждого из этих классов и прописать свой цвет.

@Slavantos · 28.12.2018, 17:13 **[ТС]**

Да, я это понимаю, но в реале когда прописываю стиль допустим для первой иконки : div.soc-ico.show-on-desktop.in-menu-first-switch.in-menu-second-switch.custom-bg.custom-border.border-on.hover-accent-bg.hover-disabled-border.hover-border-off.first.last > a.vk > ::after {background-color: #000000 !important;} - он не срабатывает! Вот поэтому я и прошу помощи в подборе правильного правила.

@Ademar · 28.12.2018, 17:30

div.soc-ico.show-on-desktop.in-menu-first-switch.in-menu-second-switch.custom-bg.custom-border.border-on.hover-accent-bg.hover-disabled-border.hover-border-off.first.last > a.vk > ::after

не пиши такие стили
будь проще
и фон по hover какому тегу даётся?

@Slavantos · 28.12.2018, 17:37 **[ТС]**

Ademar, подскажите тогда пожалуйста, как мне в браузере найти именно правильный стиль для определенного элемента, просто я знаю только такой способ

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

@andyyy · 28.12.2018, 17:42

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    
</head>
 
 
<style>
ul li:nth-child(1):hover {background: red;}
ul li:nth-child(2):hover {background: blue;}
ul li:nth-child(3):hover {background: green;}
ul li:nth-child(4):hover {background: black;}
 
 
</style>
 
<body>
<ul>
  <li>1 иконка</li>
    <li>2 иконка</li>
      <li>3 иконка</li>
        <li>4 иконка</li>
</ul> 
 
</body>
</html>

@Ademar · 28.12.2018, 17:50

попробуй вот так
a.vk:after{
цвет фона
}

Добавлено через 1 минуту
и добавь !important
должно сработать
быстро и грубо

@Ademar · 28.12.2018, 17:51

Отпишись как получится и побыстрее
скоро ухожу

@Slavantos · 28.12.2018, 17:51 **[ТС]**

Ademar, Спасибо огромное! я вообще чет не в ту степь ушел, намного оказалось легче все!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Slavantos 1 / 1 / 0 Регистрация: 29.01.2018 Сообщений: 25

	Поменять цвет иконок при наведении 27.12.2018, 13:33. Показов 12557. Ответов 8 Метки нет (Все метки) Здравствуйте! Не могу разобраться со стилями, мне необходимо поменять цвет иконок соц. сетей при наведении в шапке сайта (potolok-krasivo.ru). Необходимо каждой иконке задать свой цвет при наведении. Заранее благодарю! 0

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	28.12.2018, 17:02
	У каждой иконки на этом сайте есть свой класс. Вот для каждого из этих классов и прописать свой цвет. 0

@Slavantos 1 / 1 / 0 Регистрация: 29.01.2018 Сообщений: 25
	28.12.2018, 17:13 [ТС]
	Да, я это понимаю, но в реале когда прописываю стиль допустим для первой иконки : div.soc-ico.show-on-desktop.in-menu-first-switch.in-menu-second-switch.custom-bg.custom-border.border-on.hover-accent-bg.hover-disabled-border.hover-border-off.first.last > a.vk > ::after {background-color: #000000 !important;} - он не срабатывает! Вот поэтому я и прошу помощи в подборе правильного правила. 0

@Slavantos 1 / 1 / 0 Регистрация: 29.01.2018 Сообщений: 25
	28.12.2018, 17:37 [ТС]
	Ademar, подскажите тогда пожалуйста, как мне в браузере найти именно правильный стиль для определенного элемента, просто я знаю только такой способ , вроде в большинстве случаев срабатывал. По моей логике я смотрю так: вначале беру стиль всего блока и далее по ступенькам к нужному правилу иду. В принципе, как в разработчике браузера мне путь показывает. 0

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	28.12.2018, 17:50
	Сообщение было отмечено Slavantos как решение Решение попробуй вот так a.vk:after{ цвет фона } Добавлено через 1 минуту и добавь !important должно сработать быстро и грубо 1

@Ademar 26 / 18 / 10 Регистрация: 26.11.2012 Сообщений: 183
	28.12.2018, 17:51
	Отпишись как получится и побыстрее скоро ухожу 0

@Slavantos 1 / 1 / 0 Регистрация: 29.01.2018 Сообщений: 25
	28.12.2018, 17:51 [ТС]
	Ademar, Спасибо огромное! я вообще чет не в ту степь ушел, намного оказалось легче все! 0

Поменять цвет иконок при наведении

Решение