Активация 2х Div'vov при наводке на род. div?

Question

[akerk]

Добрый день, у меня возникла проблема, есть 2 блока которые имеют ховеры с разными цветами. Я вложил их в родительский div, но никак не могу понять: как сделать чтобы при наводке на родительский блок активировались вложеные дивы одновременно:

<div class="horse"><a href="#">
		<div class="onse"><p>ПОКУПКА 300 КЛЮЧЕЙ</p></div>
		<div class="prc"><p>1650<sup> руб. </sup></p></div>
		</a></div>

Answer 1

[ukoHka]

.horse:hover .onse {color: red}
.horse:hover .prc {color: blue}

Comments

[akerk]

Не работает

[ukoHka]

akerk: https://jsfiddle.net/5320b78w/ все работает. При наведении зеленый цвет меняется у обоих дивов. У вас где-то в другом месте переписаны цвета

[akerk]

ukoHka: https://jsfiddle.net/5320b78w/ вот что у меня получается

[akerk]

akerk: .onse {
width: 233px;
height: 50px;
background-color: #3bbfff;
margin-top: 12px;
border-radius: 0px 0px 0px 3px
}

.onse:hover {
width: 233px;
height: 50px;
background-color: #ffbd20;
margin-top: 12px;
border-radius: 0px 0px 0px 3px
}

.onse > p {

height: 14px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 20px;
margin-left: 30px;
}

.prc {
width: 127px;
height: 50px;
background-color: #2bb0f1;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}
.prc:hover {
width: 127px;
height: 50px;
background-color: #ffb300;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}

.prc > p {
height: 20px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 25px;
font-weight: 700;
line-height: 0px;
}
.horse:hover .onse {color: red}
.horse:hover .prc {color: blue}

[ukoHka]

akerk: .prc > p {
height: 20px;
color: white;
}
Вот это переопределяет цвет, поэтому не меняется

.horse:hover .prc > p {color: blue}
так будет меняться и у абзаца.

А фон я не менял, это же просто пример для демонстрации

[akerk]

ukoHka: Меняется текст, мне блоки нужно чтобы менялись

[ukoHka]

akerk: Вы неверно понимаете принцип работы CSS. Меняется не текст, а цвет шрифта выбранного селектора. Точно так же, можно поменять и цвет фона, ширину, высоту, да все, что угодно. Просто впишите свое.
.horse:hover .onse {background-color: gray; color: red}
.horse:hover .prc {background-color: yellow}
.horse:hover .prc > p {color: blue}

Answer 2

[Alexander Belov]

a {
  color: green;
}
.horse:hover .onse {color: red;}
.horse:hover .prc {color: blue;}

Comments

[akerk]

Не робит (

[Alexander Belov]

akerk: https://jsfiddle.net/5320b78w/2/

[akerk]

Alexander Belov: Вот CSS
.onse {
width: 233px;
height: 50px;
background-color: #3bbfff;
margin-top: 12px;
border-radius: 0px 0px 0px 3px
}

.onse:hover {
width: 233px;
height: 50px;
background-color: #ffbd20;
margin-top: 12px;
border-radius: 0px 0px 0px 3px
}

.onse > p {

height: 14px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 20px;
margin-left: 30px;
}

.prc {
width: 127px;
height: 50px;
background-color: #2bb0f1;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}
.prc:hover {
width: 127px;
height: 50px;
background-color: #ffb300;
float: right;
margin-top: -50px;
border-radius: 0px 0px 3px 0px;
text-align: center;
}

.prc > p {
height: 20px;
color: white;
font-family: 'PlayBold', sans-serif;
font-size: 25px;
font-weight: 700;
line-height: 0px;
}
.horse:hover .onse {color: red}
.horse:hover .prc {color: blue}

[ukoHka]

Где косяк? Это же последний параметр перед закрывающей скобкой.

[akerk]

Все сделал, надо было не color а baground-color написать, я хотел цвет блока поменять. Всем огромное спасибо.

[Alexander Belov]

Если цвет поменять текста, то так:
https://jsfiddle.net/5320b78w/3/

Если фон, то так:
https://jsfiddle.net/5320b78w/4/

[Максим Тимофеев]

Там не нужна точка с запятой

[Alexander Belov]

Максим Тимофеев: Да, не в ней причина