Как сделать так, чтобы при наведении курсора на класс вызывались изменения в других классах?

Расширение решения Коэна... и остается после щелчка... вам нужно изменить положение/стилизовать метки (и добавить свои звезды), скрыть входные данные, но это только CSS

Демонстрация: http://jsfiddle.net/f82Fg/2/

HTML

<div class="butts">
    <input id="r5" type="radio" class="butt" value="5" />
    <label for="r5">5</label>
    <input id="r4" type="radio" class="butt" value="4" />
    <label for="r4">4</label>
    <input id="r3" type="radio" class="butt" value="3" />
    <label for="r3">3</label>
    <input id="r2" type="radio" class="butt" value="2" />
    <label for="r2">2</label>
    <input id="r1" type="radio" class="butt" value="1" />
    <label for="r1">1</label>
</div>

CSS

.butts {
    float: left;
}
.butt {
    display: block;
    float: right;    
    width: 16px;
    height: 16px;
}
.butt:hover,
.butt:hover ~ .butt,
.butt:hover ~ label {
    background-color: blue;
}
.butt:checked,
.butt:checked ~ .butt,
.butt:checked ~ label {
    background-color: red;
}

Если вы разместите элементы HTML в обратном порядке, вы можете использовать селектор уровня CSS (~), чтобы выбрать предшествующие звездочки.

HTML:

<div class="stars">
    <span class="star">5</span>
    <span class="star">4</span>
    <span class="star">3</span>
    <span class="star">2</span>
    <span class="star">1</span>
</div>

CSS:

.stars {
    float: left;
}

.star {
    display: block;
    float: right;

    width: 20px;
    height: 20px;
    margin: 5px;


    background: grey;
}

.star:hover,
.star:hover ~ .star {
    background: yellow;
}

http://jsfiddle.net/gfHX4/

Вы можете выбрать только «вправо» или «вниз» с помощью CSS, а не «влево» или «вверх» — это означает, что возможен выбор элементов-потомков и братьев и сестер на том же уровне после элемента в DOM; выбор предков или предыдущих братьев и сестер не является.

Итак, что вы могли бы сделать, чтобы звезда до и включая ту, на которую наведен курсор, изменила цвет, это изменить цвет всех из них, когда элемент контейнера зависает, а затем сделать так, чтобы звезды шли после зависания. один снова станет серым, используя селектор ~.

Нет, для «активного» состояния/состояния с проверкой радиокнопки нет простого способа сделать это — вы можете попробовать использовать селектор :target, но для этого потребуется вложить весь материал в пару элементов с разными идентификаторами. , и он снова потеряет состояние, как только на странице будет использован какой-либо другой хэш-якорь.

Чтобы на самом деле добиться такого рода вещей, вам придется изменить порядок звездочек, чтобы первая отображаемая была последней из них в порядке DOM и т. д. — например, путем их плавания. вправо внутри элемента-контейнера или с помощью direction.

Таким образом, когда проверяется последний элемент, только этот элемент получает оранжевый цвет, и только первый в видимом порядке будет оранжевым.
Проверяется предпоследний элемент, вы форматируете предпоследний и последний (опять же с использованием ~) — и из-за обратного порядка отображения первые звезды в видимом порядке будут оранжевыми — и т. д.

Единственной оставшейся проблемой будет объединение этих двух подходов — не совсем уверен, что это можно сделать легко.

Редактировать: ОК, после просмотра ответа Коэна это должно быть довольно легко, если вы используете трюк с обратным порядком для состояний :hover и :checked.

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

Тем не менее, вам все равно потребуется некоторый сценарий, чтобы пометить любые поля звезды input более низкого уровня как выбранные, как только пользователь все равно нажмет звезду более высокого уровня. В противном случае, когда они уберут мышь, эффект наведения исчезнет, ​​и у вас все равно будет та же проблема, что только одна звезда отображается как выделенная.