Задать вопрос
@GrandinaWi
css

Не правильно работает ховер. Как сделать ховер для рейтинга?

Всем привет, на сайте есть рейтинг, сделал ховер анимацию, но что-то пошло не так.
62a2bd056abbd494703813.jpeg
Эффект происходит справа налево, а не наоборот. В чем может быть проблема?
Код вывода звездочек прилагается
<div class="reviews">
                                <svg width="20" class="star" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.44866 5.40992C9.03711 3.88751 9.33134 3.1263 9.80936 3.02081C9.93505 2.99306 10.065 2.99306 10.1906 3.02081C10.6687 3.1263 10.9629 3.88751 11.5513 5.40992C11.886 6.27569 12.0533 6.70857 12.3664 7.003C12.4542 7.08558 12.5495 7.15913 12.651 7.22262C13.0129 7.44896 13.4646 7.49094 14.3681 7.57491C15.8975 7.71705 16.6622 7.78812 16.8957 8.2406C16.944 8.33432 16.9769 8.43578 16.993 8.54078C17.0704 9.04774 16.5082 9.57851 15.3839 10.64L15.0717 10.9348C14.546 11.4311 14.2832 11.6793 14.1312 11.9889C14.04 12.1747 13.9788 12.3748 13.9502 12.5811C13.9024 12.9251 13.9794 13.2851 14.1333 14.0051L14.1883 14.2623C14.4643 15.5535 14.6024 16.199 14.4301 16.5164C14.2753 16.8014 13.9902 16.9839 13.6753 16.9995C13.3248 17.0169 12.8308 16.5991 11.8429 15.7637C11.192 15.2133 10.8665 14.9381 10.5052 14.8306C10.1751 14.7323 9.82494 14.7323 9.49478 14.8306C9.13349 14.9381 8.80804 15.2133 8.15715 15.7637C7.1692 16.5991 6.67523 17.0169 6.32466 16.9995C6.00975 16.9839 5.72469 16.8014 5.56992 16.5164C5.39763 16.199 5.53565 15.5535 5.81169 14.2623L5.86669 14.0051C6.02061 13.2851 6.09758 12.9251 6.04982 12.5811C6.02117 12.3748 5.96002 12.1747 5.86883 11.9889C5.71681 11.6793 5.45399 11.4311 4.92835 10.9348L4.61612 10.64C3.49179 9.57851 2.92963 9.04774 3.00705 8.54078C3.02308 8.43578 3.05596 8.33432 3.10433 8.2406C3.33785 7.78812 4.10254 7.71705 5.63193 7.57491C6.53539 7.49094 6.98712 7.44896 7.34898 7.22262C7.45048 7.15913 7.5458 7.08558 7.63362 7.003C7.9467 6.70857 8.11402 6.27569 8.44866 5.40992Z" fill="#fff" stroke="#B8B8B8" stroke-width="2"/>
                                </svg>
                                <svg class="star" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.44866 5.40992C9.03711 3.88751 9.33134 3.1263 9.80936 3.02081C9.93505 2.99306 10.065 2.99306 10.1906 3.02081C10.6687 3.1263 10.9629 3.88751 11.5513 5.40992C11.886 6.27569 12.0533 6.70857 12.3664 7.003C12.4542 7.08558 12.5495 7.15913 12.651 7.22262C13.0129 7.44896 13.4646 7.49094 14.3681 7.57491C15.8975 7.71705 16.6622 7.78812 16.8957 8.2406C16.944 8.33432 16.9769 8.43578 16.993 8.54078C17.0704 9.04774 16.5082 9.57851 15.3839 10.64L15.0717 10.9348C14.546 11.4311 14.2832 11.6793 14.1312 11.9889C14.04 12.1747 13.9788 12.3748 13.9502 12.5811C13.9024 12.9251 13.9794 13.2851 14.1333 14.0051L14.1883 14.2623C14.4643 15.5535 14.6024 16.199 14.4301 16.5164C14.2753 16.8014 13.9902 16.9839 13.6753 16.9995C13.3248 17.0169 12.8308 16.5991 11.8429 15.7637C11.192 15.2133 10.8665 14.9381 10.5052 14.8306C10.1751 14.7323 9.82494 14.7323 9.49478 14.8306C9.13349 14.9381 8.80804 15.2133 8.15715 15.7637C7.1692 16.5991 6.67523 17.0169 6.32466 16.9995C6.00975 16.9839 5.72469 16.8014 5.56992 16.5164C5.39763 16.199 5.53565 15.5535 5.81169 14.2623L5.86669 14.0051C6.02061 13.2851 6.09758 12.9251 6.04982 12.5811C6.02117 12.3748 5.96002 12.1747 5.86883 11.9889C5.71681 11.6793 5.45399 11.4311 4.92835 10.9348L4.61612 10.64C3.49179 9.57851 2.92963 9.04774 3.00705 8.54078C3.02308 8.43578 3.05596 8.33432 3.10433 8.2406C3.33785 7.78812 4.10254 7.71705 5.63193 7.57491C6.53539 7.49094 6.98712 7.44896 7.34898 7.22262C7.45048 7.15913 7.5458 7.08558 7.63362 7.003C7.9467 6.70857 8.11402 6.27569 8.44866 5.40992Z" fill="#fff" stroke="#B8B8B8" stroke-width="2"/>
                                </svg>
                                <svg class="star" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.44866 5.40992C9.03711 3.88751 9.33134 3.1263 9.80936 3.02081C9.93505 2.99306 10.065 2.99306 10.1906 3.02081C10.6687 3.1263 10.9629 3.88751 11.5513 5.40992C11.886 6.27569 12.0533 6.70857 12.3664 7.003C12.4542 7.08558 12.5495 7.15913 12.651 7.22262C13.0129 7.44896 13.4646 7.49094 14.3681 7.57491C15.8975 7.71705 16.6622 7.78812 16.8957 8.2406C16.944 8.33432 16.9769 8.43578 16.993 8.54078C17.0704 9.04774 16.5082 9.57851 15.3839 10.64L15.0717 10.9348C14.546 11.4311 14.2832 11.6793 14.1312 11.9889C14.04 12.1747 13.9788 12.3748 13.9502 12.5811C13.9024 12.9251 13.9794 13.2851 14.1333 14.0051L14.1883 14.2623C14.4643 15.5535 14.6024 16.199 14.4301 16.5164C14.2753 16.8014 13.9902 16.9839 13.6753 16.9995C13.3248 17.0169 12.8308 16.5991 11.8429 15.7637C11.192 15.2133 10.8665 14.9381 10.5052 14.8306C10.1751 14.7323 9.82494 14.7323 9.49478 14.8306C9.13349 14.9381 8.80804 15.2133 8.15715 15.7637C7.1692 16.5991 6.67523 17.0169 6.32466 16.9995C6.00975 16.9839 5.72469 16.8014 5.56992 16.5164C5.39763 16.199 5.53565 15.5535 5.81169 14.2623L5.86669 14.0051C6.02061 13.2851 6.09758 12.9251 6.04982 12.5811C6.02117 12.3748 5.96002 12.1747 5.86883 11.9889C5.71681 11.6793 5.45399 11.4311 4.92835 10.9348L4.61612 10.64C3.49179 9.57851 2.92963 9.04774 3.00705 8.54078C3.02308 8.43578 3.05596 8.33432 3.10433 8.2406C3.33785 7.78812 4.10254 7.71705 5.63193 7.57491C6.53539 7.49094 6.98712 7.44896 7.34898 7.22262C7.45048 7.15913 7.5458 7.08558 7.63362 7.003C7.9467 6.70857 8.11402 6.27569 8.44866 5.40992Z" fill="#fff" stroke="#B8B8B8" stroke-width="2"/>
                                </svg>
                                <svg class="star" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.45362 5.52296C9.10913 3.8888 9.43688 3.07172 10.0005 3.07172C10.5641 3.07172 10.8918 3.8888 11.5473 5.52297L11.5779 5.59906C11.9482 6.52228 12.1334 6.9839 12.5107 7.26447C12.8881 7.54504 13.3835 7.58941 14.3743 7.67814L14.5534 7.69418C16.1749 7.8394 16.9856 7.91201 17.1591 8.42783C17.3326 8.94365 16.7305 9.49144 15.5263 10.587L15.1244 10.9527C14.5148 11.5073 14.21 11.7846 14.0679 12.148C14.0415 12.2158 14.0194 12.2852 14.002 12.3559C13.9086 12.7348 13.9979 13.1371 14.1764 13.9416L14.2319 14.1921C14.56 15.6707 14.724 16.41 14.4376 16.7289C14.3306 16.848 14.1915 16.9338 14.037 16.976C13.6235 17.0888 13.0364 16.6105 11.8623 15.6537C11.0913 15.0255 10.7059 14.7114 10.2633 14.6407C10.0892 14.6129 9.91179 14.6129 9.7377 14.6407C9.29511 14.7114 8.90962 15.0255 8.13865 15.6537C6.96452 16.6105 6.37746 17.0888 5.96396 16.976C5.80944 16.9338 5.67035 16.848 5.56333 16.7289C5.27693 16.41 5.44096 15.6707 5.76902 14.1921L5.82459 13.9416C6.00309 13.1371 6.09235 12.7348 5.99897 12.3559C5.98155 12.2852 5.95952 12.2158 5.93302 12.148C5.79096 11.7846 5.48616 11.5073 4.87657 10.9527L4.47467 10.587C3.27047 9.49144 2.66837 8.94365 2.84185 8.42783C3.01533 7.91201 3.82609 7.8394 5.4476 7.69418L5.62671 7.67814C6.61748 7.58941 7.11286 7.54504 7.49023 7.26447C7.86761 6.9839 8.05277 6.52228 8.4231 5.59906L8.45362 5.52296Z" stroke="#B8B8B8" stroke-width="2"/>
                                </svg>
                                <svg class="star" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.45362 5.52296C9.10913 3.8888 9.43688 3.07172 10.0005 3.07172C10.5641 3.07172 10.8918 3.8888 11.5473 5.52297L11.5779 5.59906C11.9482 6.52228 12.1334 6.9839 12.5107 7.26447C12.8881 7.54504 13.3835 7.58941 14.3743 7.67814L14.5534 7.69418C16.1749 7.8394 16.9856 7.91201 17.1591 8.42783C17.3326 8.94365 16.7305 9.49144 15.5263 10.587L15.1244 10.9527C14.5148 11.5073 14.21 11.7846 14.0679 12.148C14.0415 12.2158 14.0194 12.2852 14.002 12.3559C13.9086 12.7348 13.9979 13.1371 14.1764 13.9416L14.2319 14.1921C14.56 15.6707 14.724 16.41 14.4376 16.7289C14.3306 16.848 14.1915 16.9338 14.037 16.976C13.6235 17.0888 13.0364 16.6105 11.8623 15.6537C11.0913 15.0255 10.7059 14.7114 10.2633 14.6407C10.0892 14.6129 9.91179 14.6129 9.7377 14.6407C9.29511 14.7114 8.90962 15.0255 8.13865 15.6537C6.96452 16.6105 6.37746 17.0888 5.96396 16.976C5.80944 16.9338 5.67035 16.848 5.56333 16.7289C5.27693 16.41 5.44096 15.6707 5.76902 14.1921L5.82459 13.9416C6.00309 13.1371 6.09235 12.7348 5.99897 12.3559C5.98155 12.2852 5.95952 12.2158 5.93302 12.148C5.79096 11.7846 5.48616 11.5073 4.87657 10.9527L4.47467 10.587C3.27047 9.49144 2.66837 8.94365 2.84185 8.42783C3.01533 7.91201 3.82609 7.8394 5.4476 7.69418L5.62671 7.67814C6.61748 7.58941 7.11286 7.54504 7.49023 7.26447C7.86761 6.9839 8.05277 6.52228 8.4231 5.59906L8.45362 5.52296Z" stroke="#B8B8B8" stroke-width="2"/>
                                </svg>
                            </div>

CSS:
.star:hover ~ .star path, .star path:hover{
    fill: #F2C94C;
    stroke: #F2C94C;
}
  • Вопрос задан
  • 38 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Так у вас же в CSS так и написано: применяется к звёздочке, на которую навели курсор и к следующим за ней звёздочкам. CSS не умеет воздействовать на элементы, идущие ранее в HTML-коде.
Разверните отображение
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка фронта на VUE.JS
28 нояб. 2024, в 23:03
1500 руб./в час
Настройка целей для фиксации в Яндекс Метрике
28 нояб. 2024, в 21:25
5000 руб./за проект
Разработка приложения VPN
28 нояб. 2024, в 18:46
3000 руб./за проект
Ещё заказы