Как сохранить звездные рейтинги? ⇐ Jquery

[Anonymous]

Я успешно реализовал этот фрагмент звездного рейтинга во всплывающем html-окне расширения Chrome:
Вот моя реализация:

Код: Выделить всё

.rating {
float: left;
unicode-bidi: bidi-override;
direction: rtl;
font-size: 28px;
margin-top: -11px;
color: #e8d04c;
margin-left: 10px;
margin-right: 10px;
}
.rating > span {
display: inline-block;
position: relative;
width: 0.7em;
cursor: pointer;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}

Код: Выделить всё

☆
☆
☆
☆
☆

Он работает нормально, за исключением того, что этот подход не обеспечивает возможности выбранную звезду, которую нужно «приклеить». Например, если пользователь нажимает 4 звезды, когда указатель мыши уходит, я хочу, чтобы звезды 1–4 оставались выделенными. Вместо этого все звезды не подсвечиваются при наведении курсора мыши.
Но если снова навести указатель мыши и щелкнуть звездочку, мне нужно правильное (оригинальное) поведение. И снова, если щелкнуть звездочку, выбранные звезды должны оставаться выделенными при наведении курсора мыши, а все невыделенные звезды (справа) останутся невыделенными.
Решение на чистом CSS было бы здорово , но я с удовольствием использую для этого jQuery или JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/459 ... ings-stick