jQuery的：选择上述特定的接近/同级行当前

Question

什么已经被改变为具有TD细胞与类“IMG”还强调，当鼠标越过C，d，E & 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/

Answer 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"); 
}); 
});