1. Si cela peut être résolu avec CSS, JS n'est pas nécessaire. L'idée de​​la question est : le survol d'une pseudo-classe peut résoudre ce problème.
2, mais votre code est un événement de clic.. C'est un peu faux. Eh bien, puisque j'ai écrit un proxy d'événement, j'en écrirai un plus bas et j'exploiterai directement le li quand il n'y aura pas beaucoup de li

        (function(){
            var color_list = document.getElementById('color');
              var lis = color_list.getElementsByTagName("li");

            for(var i = 0;i<lis.length;i++){
                lis[i].onclick = function(){
                    for(var i = 0;i<lis.length;i++){
                        lis[i].style.color = "";
                    }
                    this.style.color = "red";
                }
            }
        })(); 

Connaissez-vous la fermeture ? Afin de ne pas polluer les variables globales et d'utiliser des fermetures, la première façon de l'écrire est d'effacer directement la couleur de tous les li et d'ajouter de la couleur au li actuellement cliqué.

Pour la deuxième façon d'écrire, je l'ai écrit directement à l'intérieur, je n'écrirai plus le même code pour l'acquisition et la fermeture des éléments à l'extérieur

            var last = 0;
            for(var i = 0;i<lis.length;i++){
                lis[i].index = i;
                lis[i].onclick = function(){
                    lis[last].style.color = "";
                    lis[this.index].style.color = "red";
                    last = this.index;
                }
            }

La deuxième méthode consiste à effacer la précédente et à ajouter de la couleur au li actuel. En comparaison, les performances de la deuxième méthode sont légèrement meilleures et la première méthode est plus simple à comprendre.

ps : Cependant, je recommande toujours la méthode d'écriture de proxy d'événement.

1. Pourquoi pas css~

2. Vous pouvez utiliser les événements mouseenter et mouseout

Pour changer la couleur lorsque la souris est déplacée vers le haut, vous devez principalement utiliser du CSS, et la pseudo class:hover peut être effectuée.
Si vous cliquez dessus, deux idées sont proposées. 1. Restaurez la couleur de tous les li sous ul et changez e.target en rouge.
2. Cliquez pour enregistrer la cible précédente, cliquez pour restaurer la couleur de la cible précédente, et la cible actuelle devient rouge

Déplacez la souris vers le haut pour changer la couleur. Pourquoi ne pas utiliser l'événement de survol ? Vous pouvez rechercher le survol.

1. Pour tous ceux qui montent jusqu'à xx et descendent jusqu'à yy, pensez d'abord à utiliser la pseudo-classe hover de CSS

;

2. Vous enregistrez vos attributs par défaut dans un nom de classe et enregistrez les attributs modifiés dans un autre nom de classe. Lors du rappel par clic, $(this)supprimez la classe par défaut et ajoutez la classe de changement, puis parcourez ses éléments frères pour trouver la classe de changement. , après l'avoir trouvé, supprimez la classe de changement et ajoutez la classe par défaut, ça devrait aller ~

<style>
    #color > li:hover {
      color: red;
    }
</style>

    (function () {
      var color_list = document.getElementById('color');
      color_list.addEventListener('click', changeColor);

      function changeColor(e) {
        var x = e.target,
          liarr = e.target.parentElement.children,
          i, l = liarr.length;
        if (x.nodeName.toLowerCase() === 'li') {
          // 解决点击下一个li元素，上一个点击的元素颜色还原。
          for (i = 0; i < l; i++) {
            liarr[i].style.backgroundColor = null;
          };
          x.style.backgroundColor = 'red';
        }
      }
    })();

hover(function(){

这里执行鼠标移入
用.eq($(this).index()) //找到你鼠标移入的那一个li

},fonction(){

这里执行移出的
直接一行代码把所有li的颜色初始化

})