javascript - 請JS大哥們教下JS原生程式碼實作滑​​鼠移動到元素變色，移開就還原

Question

學習冒泡事件，並根據網路上的文章跟著敲了程式碼並做了小細節的改動，現有個疑問：

1、最終目的要實現滑鼠移動上去就變色，如何實現？
2、如何解決點擊下一個li元素，上一個點擊的元素顏色還原？
求各位大哥說下思路以及會用到的方法，剩下的我自己來寫，我想鍛煉下自己敲代碼的能力，感謝！
PS:看書容易，自己寫程式就懵逼，哎！

HTML程式碼如下：

<ul id="color">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

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<lis.length;i++){
                lis[i].onclick = function(){
                    for(var i = 0;i<lis.length;i++){
                        lis[i].style.color = "";
                    }
                    this.style.color = "red";
                }
            }
        })(); 

閉包知道吧？為了不污染全域變數使用閉包,第一種寫法是直接清除全部li的顏色,給當前點擊的li加上顏色。

第二種寫法我直接寫裡面了,外面的雷同的元素獲取和閉包的代碼我就不重複寫了

            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;
                }
            }

第二種是清除上一個,給當前的li添加顏色,相比較而言第二種的性能稍微好點,第一種方法理解起來簡單一點。

ps:不過我還是推薦事件代理的寫法。

Answer 2

1. Why not css~

2. 可以利用mouseenter、mouseout事件

Answer 3

滑鼠移上去就變色主要還是用css，偽類:hover就搞定了。
點擊的話提供兩個思路，1.把ul下的所有li都恢復變色，e.target再變成red。
2.點選後儲存上一個target，點選後上一個target恢復變色，目前的target變成red

Answer 4

滑鼠移上去實現變色，為啥不用hover事件，你去搜一下hover。

Answer 5

1. 所有移上去xx、移下來yy的，首先考慮用css的hover偽類；

2. 你把你預設的屬性存到一個類名裡，改變後的屬性存到另一個類名裡，click回調時，$(this)去掉默認類添加改變類，然後遍歷它的兄弟元素，去找改變類，找到以後去掉改變類別加入預設類，應該就可以了吧~

Answer 6

雷雷 雷雷

Answer 7

懸停（函數（）{

雷雷

},函數(){

雷雷

}）