title: Why "tr" "onmouseover" event does not trigger
body: <p>I have a table:</p>
  
  <pre><code>&lt;table id="someId" class="someClass" style="width:50%" border=1&gt;
          &lt;tr id="data"&gt;  
            &lt;td&gt;Row 0, Column 0&lt;/td&gt;
            &lt;td&gt;Row 0, Column 1&lt;/td&gt;
            &lt;td&gt;Row 0, Column 2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="data"&gt;  
              &lt;td&gt;Row 1, Column 0&lt;/td&gt;
              &lt;td&gt;Row 1, Column 1&lt;/td&gt;
              &lt;td&gt;Row 1, Column 2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="data"&gt;  
              &lt;td&gt;Row 2, Column 0&lt;/td&gt;
              &lt;td&gt;Row 2, Column 1&lt;/td&gt;
              &lt;td&gt;Row 2, Column 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I use the follwoing Jquery to implement the feature that <strong>when mouse over a row, the row background color will change</strong>:</p>
  
  <pre><code>$("tr#data").onmouseover(
               function() {
                   $(this).css('bgcolor', '#77FF99');
               }
           );
  </code></pre>
  
  <p>I have also tried "hover" both are not working, why?</p>