在同一元素上的OnMouseOver和OnMouseOut仅使用JavaScript创建悬停效果？

Question

我是javascript新手，为了练习，我正在使用javascript对具有特定类的表甚至对行进行条带化。 除此之外，我试图仅使用javascript在表行上创建“悬停”效果。

我能够创建onmouseover效果，但是，我很难回到表行的默认样式onmouseout。

请记住，我知道可以使用CSS或JQuery轻松实现。 但是，为此，我只想坚持使用javscript。

我试过的

    function alternate(){
        var tables = document.getElementsByTagName("table");     

        //apply the code to ALL tables on the page with a particular class
        for (var ti = 0; ti < tables.length; ++ti) {
            if (tables[ti].className == "striped"){ //stripe tables
                var rows = tables[ti].getElementsByTagName("tr");   
                for(i = 0; i < rows.length; i++){           
                    //change style of even rows to create striped effect
                    if(i % 2 == 0){ 
                        rows[i].className += "even"; //stripe even rows while maintaining default style to odd rows
                    }
                    rows[i].onmouseover = function() {
                        this.className="";
                        this.className="hovered";
                    }
                    rows[i].onmouseout = function() { 
                        if(i % 2 == 0){
                            this.className="even";
                        }else{
                            this.className="odd";
                        }                       
                    }
                }       
            }
        }
    }

Answer 1

我不确定我是否完全理解您的问题，但是我创建了一个jsfiddle来执行我认为您的意思。

据我所知，问题是当触发row [i] .mouseout时，i的值就是表中表的行数。 解决方法是在鼠标悬停时保存原始类名，然后在mouseout上重新分配该类名。 这是小提琴。 http://jsfiddle.net/LBaZu/4/

function alternate() {
    var tables = document.getElementsByTagName("table");
    for (var ti = 0; ti < tables.length; ++ti) {
        if (tables[ti].className == "striped") {
            var rows = tables[ti].getElementsByTagName("tr");
            var cls; // Variable to save the className
            for (var i = 0; i < rows.length; i++) {
                if (i % 2 == 0) rows[i].className = "even";
                rows[i].onmouseover = function() {
                    cls = this.className;  // Assign the className here
                    this.className = "hovered";
                }
                rows[i].onmouseout = function() {
                    this.className = (cls == 'even') ? cls : 'odd';
                }
            }
        }
    }
}

编辑：我重新阅读了您的问题，我想到您只想将鼠标移出时将奇数表行类名设置为奇数，而不是之前。