为什么"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>

我使用下面的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改用.bgcolorCSS中的属性是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/