如何在特定td之前更改所有td的背景，将其悬停在该td上

Question

我想在特定td上悬停特定td之前更改所有td的背景颜色。

所以，当我所有的图标和文字将鼠标悬停在图标前，该特定行中改变他们的背景。

任何人都可以请建议如何实现它。

这里是我的HTML

<div class="table-responsive"> 
     <table class="table table-condensed"> 
      <tr> 
       <td>Lorem ipsum dolor sit amet,</td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum dolor sit amet,</td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum dolor sit amet,</td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum dolor sit amet,</td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum dolor sit amet,</td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
       <td><i class="fa fa-gift"></i></td> 
      </tr> 
    </div> 

和风格

<style type="text/css"> 
     .table { 
      width: 310px; 
     } 

     td:nth-child(1) { 
      width: 200px; 
     } 

     .table-responsive { 
      border: 1px solid; 
      width: 340px; 
      padding: 20px 30px 10px 10px; 
      border-radius: 5px; 
     } 

     td:nth-child(2), 
     td:nth-child(3), 
     td:nth-child(4) { 
      width: 30px; 
     } 

     tr:active { 
      color: orange; 
     } 

     td:hover { 
      background-color: #00BD9A; 
     } 

    </style> 

Answer 1

可以插入以相反的顺序的细胞，然后通过旋转台，并且每个单元的旋转直观地改变顺序。现在你可以使用兄弟选择器~。

.table { 
 
    width: 310px; 
 
} 
 

 
td:nth-child(1) { 
 
    width: 200px; 
 
} 
 

 
.table-responsive { 
 
    border: 1px solid; 
 
    width: 340px; 
 
    padding: 20px 10px 10px 30px; 
 
    border-radius: 5px; 
 
    transform: rotateY(180deg); 
 
} 
 

 
td:nth-child(1), 
 
td:nth-child(2), 
 
td:nth-child(3), 
 
td:nth-child(4) { 
 
    width: 30px; 
 
} 
 

 
td { 
 
    transform: rotateY(180deg); 
 
    white-space: nowrap; 
 
} 
 

 
tr:active { 
 
    color: orange; 
 
} 
 

 
td:hover, td:hover ~ td { 
 
    background-color: #00BD9A; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="table-responsive"> 
 
    <table class="table table-condensed"> 
 
    <tr> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
    </tr> 
 
    <tr> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
    </tr> 
 
    <tr> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
    </tr> 
 
    <tr> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
    </tr> 
 
</div>

Answer 2

您可以使用脚本，或者像这样，使用伪元素

.table { 
 
    width: 310px; 
 
    overflow: hidden;    /* added */ 
 
} 
 

 
td:nth-child(1) { 
 
    width: 200px; 
 
} 
 

 
.table-responsive { 
 
    border: 1px solid; 
 
    width: 340px; 
 
    padding: 20px 30px 10px 10px; 
 
    border-radius: 5px; 
 
} 
 

 
td:nth-child(2), 
 
td:nth-child(3), 
 
td:nth-child(4) { 
 
    width: 30px; 
 
} 
 

 
tr:active { 
 
    color: orange; 
 
} 
 

 
td { 
 
    position: relative;    /* added */ 
 
} 
 

 
td:hover::before {     /* added */ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100vw; 
 
    background-color: #00BD9A; 
 
    z-index: -1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="table-responsive"> 
 
    <table class="table table-condensed"> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 3

验证tr：悬停并且颠倒td后面的颜色。

.table { 
 
    width: 310px; 
 
} 
 

 
td:nth-child(1) { 
 
    width: 200px; 
 
} 
 

 
.table-responsive { 
 
    border: 1px solid; 
 
    width: 340px; 
 
    padding: 20px 30px 10px 10px; 
 
    border-radius: 5px; 
 
} 
 

 
td:nth-child(2), 
 
td:nth-child(3), 
 
td:nth-child(4) { 
 
    width: 30px; 
 
} 
 

 
tr:active { 
 
    color: orange; 
 
} 
 

 
tr:hover { 
 
    background-color: #00BD9A; 
 
} 
 
td:hover ~ td { 
 
background-color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="table-responsive"> 
 
    <table class="table table-condensed"> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem ipsum dolor sit amet,</td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
     <td><i class="fa fa-gift"></i></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 4

问候，

我发现了一种通过JavaScript（JQuery的） 要做到这一点，你还需要一个类添加到每个TD在TR下

HTML

<div class="table-responsive"> 
    <table class="MyTable"> 
     <tr> 
      <td class="C1">Lorem ipsum dolor sit amet,</td> 
      <td class="C2"><i class="fa fa-gift">1</i></td> 
      <td class="C3"><i class="fa fa-gift">2</i></td> 
      <td class="C4"><i class="fa fa-gift">3</i></td> 
      <td class="C5"><i class="fa fa-gift">4</i></td> 
     </tr> 
     <tr> 
      <td class="C1">Lorem ipsum dolor sit amet,</td> 
      <td class="C2"><i class="fa fa-gift">1</i></td> 
      <td class="C3"><i class="fa fa-gift">2</i></td> 
      <td class="C4"><i class="fa fa-gift">3</i></td> 
      <td class="C5"><i class="fa fa-gift">4</i></td> 
     </tr> 
</table> 

CSS

.MyTable td{ 
     width: 30px; 
    } 
    .MyTable td:nth-child(1) { 
     width: 200px; 
    } 
    .table-responsive { 
     border: 1px solid; 
     width: 340px; 
     padding: 20px 30px 10px 10px; 
     border-radius: 5px; 
    } 
    tr:active { 
     color: orange; 
    } 

的Javascript（你应该包括jQuery库）

$('*[class*="C"]').hover(function(){ 
    var cls = $(this).attr("class"); 
    $(this).parents("tr"); 
    var j = cls.substr(cls.indexOf("C")+1,1); 
    for(var i=1;i<=j;i++){ 
     var Col = ".C"+i; 
     $(this).parents("tr").find(Col).css("background-color","#00BD9A"); 
    } 
},function(){ 
     var cls = $(this).attr("class"); 
    $(this).parents("tr"); 
    var j = cls.substr(cls.indexOf("C")+1,1); 
    for(var i=1;i<=j;i++){ 
     var Col = ".C"+i; 
     $(this).parents("tr").find(Col).css("background-color","#fff"); 
    }     
}); 

说明：

使用。悬停jquery函数风格每个col 我使用循环风格从第一个col到col在鼠标悬停在 还悬停删除我使用完全相同的代码，但风格背景回到白色（您可以更改背景颜色继承或为您自己）

关心