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

});

Другие статьи

FAQ question

FAQ

FAQ

Как убрать префикс «Категория, Метка …» с страниц архива? Поместить фильтр в файл functions.php в папке с нашей темой Как убрать scale изображений при загрузке в медиа? Поместить фильтр в файл functions.php в папке с нашей темой Как стилизовать скроллбар (css)? Почему на сайте WordPress на других языках не работает поиск? Возможно стоит обратить внимание […]

Wp Favs — менеджер плагинов для WordPress

Wp Favs — менеджер плагинов для WordPress

Wp Favs — менеджер плагинов для WordPress

Когда ты на регулярной основе создаешь шаблоны для WordPress, то сталкиваешься с одним рутинным моментом, который отнимает у тебя часть времени — загрузка и активация плагинов. Довольно успешно эту проблему решает плагин WP Favs. Вы просто создаете список плагинов, который вы регулярно используете, и потом скопом загружаете его к себе на сайт. Процесс работы с […]