Применить правила CSS к другим элементам

Question

Я не думаю, что сейчас есть актуальный вопрос, касающийся этого;но если есть, пожалуйста, укажите мне на это, и я закрою этот.

В любом случае, предположим, что HTML выглядит так:

<div>
  <div class="a" style="float:left;"></div>
  <div class="b" style="float:left;"></div>
  <div class="c" style="float:left;"></div>
  <div style="clear:both;"></div>
</div>

Есть ли какие-либо правила CSS, которые я могу определить, которые изменяютстили ДРУГИХ элементов при зависании.Итак, что-то вроде

  .a:hover {
     // change bg colors of .b and .c
  }

Я знаю, что могу сделать это с событиями наведения в javascript;но я надеялся на решение только для css.Если вы можете указать на какую-то часть спецификации CSS, которая говорит, что это невозможно, то я все равно отмечу это как ответ.(Даже если я признаю, что я не прочитал все это; я прочитал некоторые из них).

РЕДАКТИРОВАТЬ: ответы, которые все пометили, похоже, работают, и являются правильным ответом;но они не работают в Chrome / Safari (но IE8 в порядке ... см. рисунок: P).Смотрите здесь: Почему этот селектор CSS не работает: a: hover ~ span?

Answer 1

Существуют ли какие-либо правила CSS, которые я могу определить, которые изменяют стили ДРУГИХ элементов при наведении курсора

В этом случае вы можете использовать соседние селекторы братьев и сестер (поскольку b и c следуют a).

.a:hover + .b,
.a:hover + .b + .c { }

Вы также можете использовать общий родственный комбинатор из CSS 3

.a:hover ~ div {}

Хотя для этого по-прежнему необходимо, чтобы элемент, который вы наводите, был первым.

Я знаю, что могу сделать это с событиями кликов в javascr

события при наведении мыши будут иметь больше смысла

Если вы можете указать на какую-то часть спецификации CSS, которая говорит, что это невозможно

Технические характеристики говорят вам, что это возможно. Они редко заявляют, что не может быть сделано (поскольку предоставление исчерпывающего списка того, что не возможно, сделало бы все спецификации огромными)

Answer 2

Myabe это вам немного поможет:

.a:hover + .b {
     background-color:red;
 }
.a:hover + .b + .c {
    background-color:red;
 }

Просмотр результатов: http://jsfiddle.net/uNZSX/

Answer 3

Используйте это:

.a:hover + .b,
.a:hover + .b + .c,
{
    // styles of .b and .c
}

Подробнее о братских комбинаторах: http://www.w3.org/TR/css3-selectors/#sibling-combinators