Как установить эффект наведения CSS на родительские и дочерние элементы

Question

Допустим, у меня есть следующий код:

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

При наведении курсора на обертку Я хочу, чтобы это дочерний элемент title div, чтобы изменить цвет фона. Могу ли я сделать это в чистом CSS. В JS я знаю, как это сделать. Меня интересует, существует ли для этого чистый метод CSS?

Спасибо

Answer 1

Да, вы можете сделать это.Это просто:

.wrapper:hover .title {
  background-color: #f00;
}

РЕДАКТИРОВАТЬ:
Обратите внимание, что IE6 распознает :hover только на a -элементах, так что это не будет работать - но я надеюсь, что выне надо связываться с этой дрянной старой штукой.

Answer 2

что по этому поводу?

.wrapper:hover .title {
    background-color: blue;
}