Как можно создать звездный рейтинг с заполнением звезд цветом?

Создать звездный рейтинг с возможностью закрашивания звезд при наведении и клике можно с помощью HTML, CSS и JavaScript. В этом примере мы используем `div` элементы для представления звезд, а не `input`. Вот простой пример реализации:

### HTML

```html
<div class="star-rating">
    <div class="star" data-value="1">&#9733;</div>
    <div class="star" data-value="2">&#9733;</div>
    <div class="star" data-value="3">&#9733;</div>
    <div class="star" data-value="4">&#9733;</div>
    <div class="star" data-value="5">&#9733;</div>
</div>
```

### CSS

```css
.star-rating {
    display: flex;
    cursor: pointer;
}

.star {
    font-size: 30px; /* Размер звезд */
    color: #ccc; /* Цвет неактивных звезд */
    transition: color 0.2s;
}

.star.filled {
    color: gold; /* Цвет активных звезд */
}

.star:hover,
.star:hover ~ .star {
    color: gold; /* Цвет на наведении */
}
```

### JavaScript

```javascript
document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star');

    stars.forEach(star => {
        star.addEventListener('mouseover', highlightStars);
        star.addEventListener('mouseout', resetStars);
        star.addEventListener('click', setRating);
    });

    function highlightStars(e) {
        const currentValue = e.target.getAttribute('data-value');
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= currentValue) {
                star.classList.add('filled');
            }
        });
    }

    function resetStars() {
        stars.forEach(star => {
            star.classList.remove('filled');
        });
        // Восстановление рейтинга
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= currentRating) {
                star.classList.add('filled');
            }
        });
    }

    let currentRating = 0;

    function setRating(e) {
        currentRating = e.target.getAttribute('data-value');
        stars.forEach(star => {
            star.classList.remove('filled');
        });
        stars.forEach(star => {
            if (star.getAttribute('data-value') <= currentRating) {
                star.classList.add('filled');
            }
        });
    }
});
```

### Объяснение

1. **HTML**: Мы создаем контейнер `div` для звезд с отдельными `div` элементами для каждой звезды. Каждая звезда имеет атрибут `data-value`, который мы используем для определения ее значения.
  
2. **CSS**: Мы задаем стили для звезд и изменяем цвет при наведении и при заполнении. Добавляем эффект плавного изменения цвета.

3. **JavaScript**:
   - Добавляем обработчики событий для каждой звезды.
   - Функция `highlightStars` заполняет звезды при наведении.
   - Функция `resetStars` сбрасывает заполнение, когда курсор уходит, но сохраняет заполнение, если звезда уже выбрана.
   - Функция `setRating` устанавливает текущий рейтинг при клике и заполняет звезды соответствующим образом.

Этот код создает интерактивный звездный рейтинг, который реагирует на наведение курсора и клики, заполняя звезды цветом.

<a href="https://ru.stackoverflow.com/a/556318/308951" rel="nofollow">https://ru.stackoverflow.com/a/556318/308951</a> вот так..смотрите