Question

当鼠标越过C，D，E＆amp;时，必须改变以使具有“img”类的TD单元也被突出显示。 F（突出显示图1）和K＆amp; L（图3突出显示） - 不仅在定义“rowspan”的“第一行”（A，B，G，H＆amp; 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");
 });
});

jQuery：选择当前上方的特定最近/兄弟行

1 个答案: