Как изменить CSS свойства элемента при наведении на него мыши?

Question

[NkDev]

Есть такой код: https://jsfiddle.net/y7cj5tmr/

Нужно чтобы при наведении мыши на один из трех блоков, менялись CSS свойства входящих в этот блок div'ов.

Например при наведении мыши на средний блок, у внешнего и внутреннего div'а менялись цвета background'ов.

Подскажите, как это сделать на css не меняя html код.

Спасибо!

Answer 1

[TerNik]

.outer:nth-child(2):hover {
    background: red;
}
.outer:nth-child(2):hover .inner {
    background: green;
}

Answer 2

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

https://jsfiddle.net/y7cj5tmr/3/
или еще веселее
https://jsfiddle.net/y7cj5tmr/6/