Автор: Stasyuk Eugene 46 Мітки: , 30.06.2022

У цій статті я покажу, як зробити візуальну частину зіркового рейтингу. А саме:

  • як можна стилізувати
  • як правильно зробити hover
  • як правильно зберегти заливання зірки після кліку

Готовий варіант:

Розмітка

В якості розмітки у нас є блок контейнер з класом .rate всередині якого я розмістив 5 посилань. У якості самої зірки я використував шрифт. Але, швидше за все, на практиці замість нього доведеться використовувати зображення.

<div class="rate">
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
</div>

Стилі

При стилізації варто звернути увагу на таке:

  • щоб кожне посилання мало position: relative;
.rate a{
  text-decoration: none;
  color: yellow;
  position: relative;
  display: inline-block;
}
  • Створюємо псевдоелемент: before. Ми будемо його використовувати як заповнювач зірки. У дефолтному стані ставимо йому opacity: 0;
.rate a:before{
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-event: none;
  opacity: 0;
}
  • при ховері ми присвоюватимемо посиланням клас .hover, а при натисканні на них – клас .active. Ці класи робитимуть наш псевдоелемент видимим. Тому це ми теж прописуємо в стилях.
.rate a.hover:before,
.rate a.active:before{
  opacity: 1;
}

Скрипт

У скрипті збираємо наші зірки на сторінці і для кожної з них прописуємо додавання або видалення відповідного класу при наведенні або натисканні

let rateLink = document.querySelectorAll('.rate a');

rateLink.forEach((link, i) => {
  //mouseenter
  link.addEventListener('mouseenter', function(e){
    let num = 0;

    while(num <= i){
      rateLink[num].classList.add('hover');

      num++;
    }
  });
  
  //mouseleave
  link.addEventListener('mouseleave', function(e){
    rateLink.forEach(item => {
      item.classList.remove('hover');
    });
  });
  
  //click
  link.addEventListener('click', function(e){
    e.preventDefault();

    let num = 0;

    rateLink.forEach(item => {
      item.classList.remove('active');
    });

    while(num <= i){
      rateLink[num].classList.add('active');

      num++;
    }
  });

});

Інші статті

Як імпортувати велику базу даних MySQL в OpenServer

Як імпортувати велику базу даних MySQL в OpenServer

Як імпортувати велику базу даних MySQL в OpenServer

Мабуть, усі звикли імпортувати базу даних за допомогою phpMyAdmin. Але ця платформа має обмеження за вагою файлу, який можна завантажити. Тому якщо дамп бази перевищує цю квоту, через phpMyAdmin зробити це не вийде. Сьогодні я покажу альтернативний спосіб завантаження бази даних – через консоль. В OpenServer можна скористатися вбудованою консоллю (але це не обов’язково, можна […]

Спливаюче вікно на сайті (попап, модальне вікно) pop-up window

Спливаюче вікно на сайті (попап, модальне вікно)

Спливаюче вікно на сайті (попап, модальне вікно)

Коли я тільки освоював ази розробки, спливаюче вікно я робив вручну. Так, так – замість того, щоб знайти якесь готове рішення, я займався цією невдячною справою 🤪. Мені здавалося, що особливо нічого складного в цьому немає. Але, тільки через якийсь час роботи над цим питанням, я почав усвідомлювати, що зробити це не так вже й […]