Question

What have to be changed to have the TD cells with class “img” also highlighted, when the mouse goes over C,D,E & F (Pic 1 is highlighted) and K & L (Pic 3 is highlighted) – not only over the “first row” where the “rowspan” is defined (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");});
});

Code example to try: http://jsfiddle.net/9krDS/

Answer 1

Try this

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