Зоряний рейтинг із завидною частотою зустрічається майже на всіх веб-сайтах. Сьогодні ми вирішили трохи поекспериментувати, і розробити новий підхід до створення зоряного рейтингу з використанням невеликого уривка коду CSS, і зовсім не вдаватися до коду j # 097; vascript.
У верстці для зірки мають одиницю УНІКОД (☆). Якщо у вас стоїть кодування UTF-8, то тут не буде проблем. В іншому випадку ви можете використовувати ☆. Ви можете використовувати стільки зірок, скільки забажаєте:
Тепер нам потрібно при наведенні замінити цю «порожню» зірку «твердої». Ви можете просто створити псевдо елемент твердої зірки (★) поверх неї при подію: hover
В силу того, що елемент має абсолютне позиціонування, ми застосовуємо top: 0; left: 0; (Як мінімум в нових браузерах). Таким чином, виходить, що тверда зірочка сидить прямо поверх порожній. Ви навіть можете змінити її розмір або колір, якщо забажаєте.
Але тим не менше, те, що є у нас, працює тільки з окремими зірками. Наша структура UX вимагає того, щоб всі зірки були заповнені. Наприклад, якщо ми наведемо на 4-ю зірку, то не тільки вона повинна бути заповнена, але також і 3-я, 2-я і 1-я.
Неможливо за допомогою CSS виділити попередні дочірні елементи. Проте, у нас є можливість виділити наступні дочірні елементи. Наприклад, за допомогою суміжного або загального родинного комбінатора. Якщо ми буквально перевернемо черговість символів, то зможемо використовувати загальний споріднений комбінатор для того, щоб виділяти зірки, розташовані до тієї зірки, на яку був наведений курсор миші (так як фактично, в коді HTML будуть виділені наступні зірки, просто відображені вони у нас в перевернутому порядку).
І на цьому все! Повноцінна UX-структура з використанням чуточки коду. Ось весь код CSS, за рахунок якого даний елемент буде працювати:
Застосування на практиці