Изменение стиля элемента при наведении курсора

Question

У меня есть следующая структура:

<div id="e1">
  <h1>Header</h1>
  <div id="main">text text text text</div>
  <div id="footer">something</div>
</div>

И я хочу, чтобы <h1> стал синим, например, при наведении нижнего колонтитула. Я знаю, что могу сделать это с помощью Javascript, но мне было интересно, если бы вы знали какой-нибудь трюк CSS, чтобы сделать это без.

Спасибо!

Answer 1

Ваш h1 предшествует #footer, поэтому с чистым CSS это невозможно, так как он не предоставляет селектор, соответствующий предыдущему элементу брата.

Answer 2

#e1:hover {
      color:red;
}

#main, #footer{
    color:black 
}

Другой вариант.

Answer 3

Я реализовал это таким образом, не меняя структуру HTML и чистый CSS.

см. В jsfiddle: http://jsfiddle.net/ijse/dhcqw/