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。 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/

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

1 个答案: