OnMouseOver and OnMouseOut on the same element to create hover effect using javascript only?
<p>I am new to javascript and for practice, I am using javascript to stripe even rows for tables with a particular class. Besides that, I am trying to create a 'hover' effect on table rows using javascript only.</p>

<p>I was able to create the onmouseover effect, however, I am having a very difficult time going back to the default style onmouseout of the table row.</p>

<p>Please keep in mind that I know this can easily be achieved with css or JQuery; however, for this, I would like to stick to javscript only.</p>

<p>What I tried:</p>

<pre><code>    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 &lt; tables.length; ++ti) {
            if (tables[ti].className == "striped"){ //stripe tables
                var rows = tables[ti].getElementsByTagName("tr");   
                for(i = 0; i &lt; 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";
                        }                       
                    }
                }       
            }
        }
    }
</code></pre>
