Форум Сайтостроение Веб-строительство

Помогите сделать изменение цвета текста в блоке

K1
На сайте с 15.11.2014
Offline
158
karen1994
634

Здравствуйте) Помоги пожалуйста наложить эффект изменения цвета при наведении

вот html и css блока http://codepen.io/karensarkisyan/pen/yJYGGd, но не могу понять на какой из дивов накладывать эффект, чтобы при наведении на этот блок его цвет становился темным (это я сделал) и одновременно текст изменялся из серого на белый (чтобы было видно на темном сроке)... Помогите пожалуйста разобраться

Пример брал от сюда - http://steampay.com/action, на этом сайте сделан такой эффект, но не пойму как так сделать((

altezzik
На сайте с 06.11.2011
Offline
247
altezzik
#1

Что-то типа того: 


.item:hover .item-title {

  color:#fff;

}
K1
На сайте с 15.11.2014
Offline
158
karen1994
#2
altezzik:
Что-то типа того: 


.item:hover .item-title {

  color:#fff;

}

А чтобы и знак рубля тоже белым стал?

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#3
karen1994:
А чтобы и знак рубля тоже белым стал?


.item:hover .item-title, .fa { 
  color:#fff; 
}
//TODO: перестать откладывать на потом
K1
На сайте с 15.11.2014
Offline
158
karen1994
#4
Ragnarok:

.item:hover .item-title, .fa { 

  color:#fff; 

}

Не работает, все ровно выделяет только тайтл, а знак рубля так и остался темным

AW
На сайте с 04.06.2016
Offline
19
Alex Web
#5
karen1994:
Не работает, все ровно выделяет только тайтл, а знак рубля так и остался темным

Так ты допиши "i" перед .fa То есть получится так 

.item:hover .item-title, i.fa { 

  color:#fff; 

}

Иначе браузер не догоняет к какому именно элементу кода html ты хочешь впихнуть данный стиль (белый при наведении)

K1
На сайте с 15.11.2014
Offline
158
karen1994
#6
Alex Web:
Так ты допиши "i" перед .fa То есть получится так 

.item:hover .item-title, i.fa { 

  color:#fff; 

}


Иначе браузер не догоняет к какому именно элементу кода html ты хочешь впихнуть данный стиль (белый при наведении)

Да, оно выделяется, но без наведения она тоже белая, а должна быть серая(( Вот тут пример блока я брал http://steampay.com/action

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#7

karen1994, 


.item:hover .item-title, .item:hover i.fa { 
  color:#fff; 
}
AW
На сайте с 04.06.2016
Offline
19
Alex Web
#8
karen1994:
Да, оно выделяется, но без наведения она тоже белая, а должна быть серая(( Вот тут пример блока я брал http://steampay.com/action

Кто она? Тебе же знак рубль нужен был белым при наведении? Так он и становится белым при наведении и в тоже время остается серым если не наводить курсор мыши на блок.

Благодаря ответу пользователя выше)) .item:hover забыли мы

Активаня ссылка в меню Как скрыть урл при Блокировка ТГ - зацепило

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий