[zulyamodx]

Здравствуйте.
Вы можете помочь решить эту задачу:
1. При наведении курсором на звездочку, класс в этом блоке:

<span class="star-rating-control">
    <input type="hidden" name="rate1_1" value="">
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_0">
        <a title="1">1</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_1">
        <a title="2">2</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_2">
        <a title="3">3</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_3">
        <a title="4">4</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_4">
        <a title="5">5</a>
    </div>
</span>

менялся на следующее:

<span class="star-rating-control">
    <input type="hidden" name="rate1_1" value="">
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_0">
        <a title="1">1</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_1">
        <a title="2">2</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_2">
        <a title="3">3</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_3">
        <a title="4">4</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_4">
        <a title="5">5</a>
    </div>
</span>

2. А также при клике на соответствующей звездочке, в звездочках класс менялся на:

<span class="star-rating-control">
    <input type="hidden" name="rate1_1" value="">
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_0">
        <a title="1">1</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_1">
        <a title="2">2</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_2">
        <a title="3">3</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_3">
        <a title="4">4</a>
    </div>
    
    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_4">
        <a title="5">5</a>
    </div>
</span>

Пояснение к вопросу.
Есть 5 звездочек. Посетитель может дать любую оценку от 1 до 5. Поэтому он может кликнут на любой звездочке. Когда он наводит курсор на 3 звездочку, то в предыдущих 2 звездочках как и в третьем должен поменяться на star-rating rater-0 star-rating-applied star-rating-live star-rating-hover, а при клике на звездочке, скажем на 3 звездочке, то в 1, 2, 3 класс должен поменяться на star-rating rater-0 star-rating-applied star-rating-live star-rating-on.

Пожалуйста, помогите!