なぜ「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を持つ複数の要素を持つことはできません。 id="data"の代わりにclass="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です。

またmouseoverの影響をキャンセルするmouseout機能を追加することもできます。

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

ここでそれを試してみてください。http://www.jsfiddle.net/2zuCb/