title: change text on mouse over and change back on mouse out
body: <p>I want to have a table that changes itself on mouse over and changes back to the original on mouse out. Here the best I can do:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="line1"&gt;
      &lt;table onmouseover="showMore()" border="1"&gt;
          &lt;tr&gt;  
              &lt;td&gt;this is sick&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  function showMore(){
      document.getElementById("line1").innerHTML = "&lt;table border='1' onmouseout='showLess()'&gt;&lt;tr&gt;&lt;td&gt;this is awesome&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
  }
  
  function showLess(){
      document.getElementById("line1").innerHTML = "&lt;table border='1' onmouseover='showMore()'&gt;&lt;tr&gt;&lt;td&gt;this is sick&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, sometimes when I move the mouse out, the content inside the  still doesn't change back to the original. Is there a better way to do this?</p>
  
  <p>Thanks!</p>