Удаление цвета элемента после MouseOver с помощью javascript/Jquery

Я пытаюсь сделать систему звездного рейтинга для моего проекта django, используя Js и Jquery. Я хочу изменить цвет звезд, когда мышь находится на каждой звезде. Мой Html:

<div class="user-rating">
<form action="" method="post" class="rate-form">
    {% csrf_token %}
    <button type="submit" class="fa fa-star fa-lg" id="star-first"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-second"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-third"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fourth"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fifth"></button>
</form>
<div id="confirm-score"></div>

Css:

.checked {
color: #f2994a;}

Код Javascript: 

(function ($) {
"use strict";

$(document).ready(function () {

    const starone = document.getElementById('star-first')
    const startwo = document.getElementById('star-second')
    const starthird = document.getElementById('star-third')
    const starfourth = document.getElementById('star-fourth')
    const starfifth = document.getElementById('star-fifth')

    const form = document.querySelector('.rate-form')
    const confirmBox = document.getElementById('confirm-score')
    const csrf = document.getElementsByName('csrfmiddlewaretoken')

    const handleStarSelect = (size) => {
        const children = form.children
        for (let i = 0; i < children.length; i++) {
            if (i <= size) {
                children[i].classList.add('checked')
            } else {
                children[i].classList.remove('checked')
            }
        }
    }
    // handleStarSelect(2)

    const handleSelect = (selection) => {
        switch (selection) {
            case 'star-first': {
                // starone.classList.add('checked')
                // startwo.classList.remove('checked')
                // starthird.classList.remove('checked')
                // starfourth.classList.remove('checked')
                // starfifth.classList.remove('checked')
                handleStarSelect(1)
                return
            }

            case 'star-second': {
                handleStarSelect(2)
                return
            }
            case 'star-third': {
                handleStarSelect(3)
                return
            }
            case 'star-fourth': {
                handleStarSelect(4)
                return
            }
            case 'star-fifth': {
                handleStarSelect(5)
                return
            }

        }

    }

    const arr = [starone, startwo, starthird, starfourth, starfifth]

    arr.forEach(item => item.addEventListener('mouseover', (event) => {
        handleSelect(event.target.id)
    }))

});})(jQuery);

Когда я навожу курсор на звезду, он работает и меняет цвет звезд с черного на желтый, но когда я перемещаю курсор со звезды, цвет не исчезает. Другая проблема в том, что когда я, например, навожу курсор на третью звезду, первые три звезды меняют цвет на желтый, а затем, когда я навожу курсор на вторую или четвертую звезду, цвет не меняется, и все равно три звезды остаются желтыми. Я следовал этому руководству Youtube: введите описание ссылки здесь. В этом видео функции работают правильно, я сделал то же самое, что и в учебнике, но у меня это не работает правильно.

Если у вас есть какие-либо идеи, не стесняйтесь писать :) кстати, я хочу использовать именно этот метод, а не другие, например, использование css.

Вы можете достичь того же результата с помощью одного лишь CSS. Не забудьте добавить события фокуса клавиатуры.

EDIT: Просматривая ваш вопрос еще раз, я увидел, что вам не нужно CSS-решение. CSS-решение часто лучше, чем JavaScript-решение, поскольку некоторые пользователи отключают JavaScript в целях безопасности, а CSS может упростить некоторые вещи. Я также добавлю для вас ответ на ванильный JavaScript, но я рекомендую использовать JavaScript только в случае крайней необходимости.

.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.star:hover,
.star:focus,
.star:hover~.star,
.star:focus~.star {
  cursor: pointer;
  color: #f2994a;
}

.star:focus {
  outline: 2px solid #f2994a;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>

Решение на JavaScript: 

document.querySelectorAll('.star').forEach((star) => {
  star.addEventListener('mouseenter', addRating)
  star.addEventListener('focus', addRating)
  star.addEventListener('mouseleave', removeRating)
  star.addEventListener('blur', removeRating)
})

function addRating(event) {
  applyRating(event.target, "add")
}

function removeRating(event) {
  applyRating(event.target, "remove")
}

function applyRating(element, action) {
  document.querySelectorAll(`#${element.id}~.star`).forEach((prevStar) => prevStar.classList[action]('checked'))
  element.classList[action]('checked')
}
.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.checked {
  color: #f2994a;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>

я только что проверил ваш код, он работает нормально, но единственная проблема, которую я увидел, это то, что он выбирает следующий элемент при наведении на текущий, это потому что цикл for выполняется с 0, поэтому handleStarSelect(0) означает первый элемент

посмотрите на пример исправленных индексов

я также хотел предложить свой код, который я написал для выполнения того же поведения, если вы хотите, вы можете использовать его также

function manageRating() {
    const btns = [...document.querySelectorAll(".rate-form > button")]

    function reset() {btns.forEach((each) => { each.classList.remove("checked") })}
        
    function rate(number) {
        reset()
        for (let c = 0; c <= number; c++) {
            btns[c].classList.add("checked")
        }
    }

    btns.forEach((each) => {
        each.addEventListener("mouseenter", e => {
            let index = btns.indexOf(e.target)
            rate(index)
        })
    })
    btns[0].parentElement.addEventListener("mouseleave",reset)
}
manageRating()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
    <title>Experiment</title>
</head>

<body>
    <style>
        button {background:transparent;border: none;}
        .checked {
            color: #f2994a;
        }
    </style>
    <form action="" method="post" class="rate-form">
        {% csrf_token %}
        <button type="submit" class="fa fa-star fa-lg" id="star-first"></button>
        <button type="submit" class="fa fa-star fa-lg" id="star-second"></button>
        <button type="submit" class="fa fa-star fa-lg" id="star-third"></button>
        <button type="submit" class="fa fa-star fa-lg" id="star-fourth"></button>
        <button type="submit" class="fa fa-star fa-lg" id="star-fifth"></button>
    </form>
</body>
<!-- <link rel="stylesheet" href="./styles.css"> -->
<!-- <script src="./main.js"></script> -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->

</html>

Вернуться на верх