Как при :hover родителя поменять дочерний элемент?

Question

[eldar_web]

К примеру, есть код:

<div>
 <span></span>
</div>

Как при div:hover менять span?

Answer 1

[Dru Dro]

div:hover span {/*стиль для всех span внутри div */
}

div:hover > span {/*стиль для всех span - прямых наследников div */
}

div:hover + span {/*стиль для первого span после div */
}

Comments

[Dru Dro]

everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize

Answer 2

[Денис Инешин]

Пример: jsfiddle.net/2yuak32u/1

<div class='parent'>
    <span class='child1'>1</span>
    <span class='child2'>2</span>
</div>

.child1 {
    display: block;
}
.child2 {
    display: none;
}
.parent:hover .child1 {
    display: none;
}
.parent:hover .child2 {
    display: block;
}