请JS大哥们教下JS原生代码实现鼠标移动到元素变色，移开就还原

Question

学习冒泡事件，并根据网上的文章跟着敲了代码并做了小细节的改动，现有个疑问：

1、最终目的要实现鼠标移动上去就变色，如何实现？
2、如何解决点击下一个li元素，上一个点击的元素颜色还原？
求各位大哥说下思路以及会用到的方法，剩下的我自己来写，我想锻炼下自己敲代码的能力，感谢！
PS:看书容易，自己写代码就懵逼，哎！

HTML代码如下：

    1
    2
    3
    4
    5
    6

JS代码：

 (function () {
        var color_list = document.getElementById('color');
        color_list.addEventListener('click',changeColor);
        function changeColor(e) {
            var x = e.target;
            if(x.nodeName.toLowerCase() === 'li')
                x.style.backgroundColor = 'red';
//    最终目的要实现鼠标移动上去就变色？
//    另外，如何解决点击下一个li元素，上一个点击的元素颜色还原？
        }
    })();

Answer 1

1,能用CSS解决就不用JS,题目的思路用：hover伪类可以解决这个问题。
2,但是你的代码是click事件..有点没对上,好吧,既然都写了事件代理,我写一个low点的,在li不多的情况下直接操作li

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

            for(var i = 0;i

闭包知道吧？为了不污染全局变量使用闭包,第一种写法是直接清除全部li的颜色,给当前点击的li加上颜色。

第二种写法我直接写里面了,外面的雷同的元素获取和闭包的代码我就不重复写了

            var last = 0;
            for(var i = 0;i

第二种是清除上一个,给当前的li添加颜色,相比较而言第二种的性能稍微好点,第一种方法理解起来简单一点。

ps:不过我还是推荐事件代理的写法。