为什么“TR”“的onmouseover”事件不会触发
问题描述:
我有一个表:为什么“TR”“的onmouseover”事件不会触发
<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');
}
);
我也试过“悬停”两个都不行,为什么?
答
你不能有多个具有相同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.w3schools.com/tags/tag_tr.asp,它说“tr”元素有“onmouseover”函数,看起来这个参考是错误的。 – Mellon 2011-01-27 11:57:16