Tailwind CSS 和星级悬停

如何解决Tailwind CSS 和星级悬停

我有一个这样的评分组件。使用 Livewire 和 Tailwind CSS 以及 Alpine Js。

<div class="flex items-center">
    @for ($i = 0; $i < $this->rating; $i++)
    <svg wire:click.prevent="rate({{ $i+1 }})"
        class="cursor-pointer w-6 text-yellow-300 transition duration-150 @if(round($user->average_rating) > $i) text-yellow-300 @endif"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
        fill="currentColor">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
    </svg>
    @endfor
    @for ($i = $this->rating; $i < 5; $i++)
    <svg wire:click.prevent="rate({{ $i+1 }})"
        class="cursor-pointer w-6 transition duration-150 hover:text-yellow-300  @if(round($user->average_rating) > $i) text-yellow-300 @endif"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
        fill="currentColor">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
    </svg>
    @endfor
    <span class="px-1 @if ($user->average_rating <= 2) bg-orange-500 @elseif($user->average_rating <= 4) bg-yellow-500 @else bg-green-500 @endif  text-white rounded">{{ $user->average_rating }}</span>
</div>

此代码可以正常工作，但有一件事：将鼠标悬停在无法正常工作的星星上。只有一颗星在变化。我想这样做：如果我悬停在第 4 颗星上，第 1、第 2、第 3 和第 4 颗星应该是黄色的。如果我悬停在第二颗星上，第一颗和第二颗应该是黄色的。我无法为此制定逻辑。最简单的方法是什么？