Автор: Stasyuk Eugene 72 Мітки: , 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++;
    }
  });

});

Інші статті

ACF поля в текстовому редакторі Gutenberg

ACF поля в текстовому редакторі Gutenberg

ACF поля в текстовому редакторі Gutenberg

Gutenberg – уже досить довго використовується у WordPress як основний текстовий редактор. Я, напевно, як і більшість розробників, не особливо горів бажанням його використовувати. Тим більше, що як альтернативу можна було завантажити плагін Classic Editor і далі користуватися старим редактором. Але, у міру використання Gutenberg, я побачив велику кількість його переваг і таким чином плавно […]

FAQ question

FAQ

FAQ

Як прибрати префікс “Категорія, Мітка…” зі сторінок архіву? Помістити фільтр у файл functions.php у папці з нашою темою Як прибрати scale зображень під час завантаження медіа? Помістити фільтр у файл functions.php у папці з нашою темою Як стилізувати скролбар (css)? Чому на сайті WordPress іншими мовами не працює пошук? Можливо варто звернути увагу на значення […]