为什么“TR”“的onmouseover”事件不会触发

Question

我有一个表：

<table id="someId" class="someClass" style="width:50%" border=1> 
     <tr id="data"> 
      <td>Row 0, Column 0</td> 
      <td>Row 0, Column 1</td> 
      <td>Row 0, Column 2</td> 
     </tr> 
     <tr id="data"> 
      <td>Row 1, Column 0</td> 
      <td>Row 1, Column 1</td> 
      <td>Row 1, Column 2</td> 
     </tr> 
     <tr id="data"> 
      <td>Row 2, Column 0</td> 
      <td>Row 2, Column 1</td> 
      <td>Row 2, Column 2</td> 
     </tr> 
    </table> 

我用follwoing jQuery来实现功能，当鼠标移到某行上，该行的背景颜色会改变 ：

$("tr#data").onmouseover(
      function() { 
       $(this).css('bgcolor', '#77FF99'); 
      } 
     ); 

我也试过“悬停”两个都不行，为什么？

Answer 1

你不能有多个具有相同ID的元素。尝试使用class="data"而不是id="data"。

<table id="someId" class="someClass" style="width:50%" border=1> 
     <tr class="data"> 
      <td>Row 0, Column 0</td> 
      <td>Row 0, Column 1</td> 
      <td>Row 0, Column 2</td> 
     </tr> 
     <tr class="data"> 
      <td>Row 1, Column 0</td> 
      <td>Row 1, Column 1</td> 
      <td>Row 1, Column 2</td> 
     </tr> 
     <tr class="data"> 
      <td>Row 2, Column 0</td> 
      <td>Row 2, Column 1</td> 
      <td>Row 2, Column 2</td> 
     </tr> 
    </table> 

此外，onmouseover功能不存在，则使用mouseover代替。而CSS中的bgcolor属性为background-color。

您可能还需要添加一个mouseout功能取消mouseover的效果：

$("tr.data").mouseover(function() { 
    $(this).css('background-color', '#77FF99'); 
}).mouseout(function() { 
    $(this).css('background-color', 'transparent'); 
}); 

这里试试：http://www.jsfiddle.net/2zuCb/