Создайте 5-звездочный рейтинг с парящими изображениями без JavaScript

Question

Есть ли способ реализовать 5-звездочный рейтинг, который поддерживает изменение изображений 5 звезд при наведении курсора, без использования Javascript? Клик должен выполнить HTTP POST

Чтобы лучше понять, я искал образец и нашел http://orkans -tmp.22web.net / star_rating / (выделите «Быстрый пример с опциями SELECT»)

Насколько я знаю HTML, невозможно иметь несколько изображений / кнопок, которые выполняют публикацию (чтобы узнать, какой рейтинг был присвоен пользователем) и одновременно меняют несколько фоновых изображений.

Answer 1

Вот пример из CSS3 Secrets

jsfiddle

Вы можете использовать селекторы CSS, чтобы получить то, что вы хотите сделать без JavaScript.

Answer 2

Возможно ли 2 использовать опции OnMouseOver и OnMouseOut для создания того же эффекта при наведении?

Answer 3

Вы можете изменить изображение с помощью CSS.Просто примените класс и задайте ему параметр: hover.

т.е. .star: hover {color: blue;}

Я предполагаю, что вы хотели бы, чтобы все предыдущие звезды также меняли цвет при наведении, это было бы возможно, но довольно сложно.Мы начнем с изображения из 5 пусков (все выделены) и изображения одного невыделенного пуска.Поместите пять невыделенных стартов прямо друг на друга (установите абсолютное положение).Отрегулируйте намерение звезд так, чтобы каждая из них была больше, чем предыдущая, и чтобы они были расположены правильно (без фактического наложения друг на друга).Добавьте CSS при наведении курсора, который отличается для каждого.Это должно будет заменить изображение 5 выделенным выделенным изображением.Ширина должна быть установлена ​​так, чтобы отображалось только соответствующее количество звездочек.Нужно установить z-индекс так, чтобы он располагался поверх невыделенных изображений всех предыдущих звезд.