当鼠标越过C,D,E&时,必须改变以使具有“img”类的TD单元也被突出显示。 F(突出显示图1)和K& L(图3突出显示) - 不仅在定义“rowspan”的“第一行”(A,B,G,H& J)上?
<table class="stripeMe" border="1">
<tr class="row1">
<td rowspan="3" class="img">Pic 1</td>
<td>- A -</td>
<td>- B -</td>
</tr>
<tr>
<td>- C -</td>
<td>- D -</td>
</tr>
<tr>
<td>- E -</td>
<td>- F -</td>
</tr>
<tr class="row1">
<td rowspan="1" class="img">Pic 2</td>
<td>- G -</td>
<td>- H -</td>
</tr>
<tr class="row1">
<td rowspan="2" class="img">Pic 3</td>
<td>- I -</td>
<td>- J -</td>
</tr>
<tr>
<td>- K -</td>
<td>- L -</td>
</tr>
</table>
CSS
tr.over td {
background-color: #f70;
}
的jQuery
$(document).ready(function(){
$(".stripeMe tr").mouseover(function() {
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");});
});
尝试的代码示例:http://jsfiddle.net/9krDS/
答案 0 :(得分:1)
试试这个
$(document).ready(function(){
$(".stripeMe").delegate("td", "mouseover", function() {
if($(this).closest("tr").hasClass("row1")){
$(this).closest("tr").find(".img").addClass("over");
}
else{
var tr = $(this).closest("tr");
while(!tr.hasClass("row1")){
tr = tr.prev("tr");
}
tr.find(".img").addClass("over");
}
})
.delegate("td", "mouseout", function(){
$(this).closest(".stripeMe").find(".img").removeClass("over");
});
});