JQuery: выбор конкретной ближайшей / родной строки выше текущей

Question

Что необходимо изменить, чтобы ячейки TD с классом «img» также выделялись, когда указатель мыши проходит над C, D, E & F (рис. 1 выделен) и K & L (рис. 3 выделен) - не только над «первой строкой», где определен «диапазон строк» ​​(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");
 });
});