Css 如何更改所有td&x27的背景；s、 在特定td之前，将鼠标悬停在该td上

我想在某个特定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>

<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>

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

和风格

  <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>

.桌子{
宽度：310px；
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 30px 10px 10px；
边界半径：5px；
}
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
tr：主动{
颜色：橙色；
}
td:悬停{
背景色：#00BD9A；
}

您可以使用脚本，或者类似的，使用伪元素

.table{
宽度：310px；
溢出：隐藏；/*已添加*/
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 30px 10px 10px；
边界半径：5px；
}
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
tr：主动{
颜色：橙色；
}
运输署{
位置：相对；/*已添加*/
}
td:hover:：在{/*之前添加*/
内容：''；
位置：绝对位置；
排名：0；
右：0；
身高：100%；
宽度：100vw；
背景色：#00BD9A；
z指数：-1；
}

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

您可以使用脚本，或者类似的，使用伪元素

.table{
宽度：310px；
溢出：隐藏；/*已添加*/
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 30px 10px 10px；
边界半径：5px；
}
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
tr：主动{
颜色：橙色；
}
运输署{
位置：相对；/*已添加*/
}
td:hover:：在{/*之前添加*/
内容：''；
位置：绝对位置；
排名：0；
右：0；
身高：100%；
宽度：100vw；
背景色：#00BD9A；
z指数：-1；
}

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

验证tr:hover，然后反转紧随悬停的td的颜色

.table{
宽度：310px；
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 30px 10px 10px；
边界半径：5px；
}
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
tr：主动{
颜色：橙色；
}
tr：悬停{
背景色：#00BD9A；
}
td:hover~td{
背景色：白色；
}

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

验证tr:hover，然后反转紧随悬停的td的颜色

.table{
宽度：310px；
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 30px 10px 10px；
边界半径：5px；
}
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
tr：主动{
颜色：橙色；
}
tr：悬停{
背景色：#00BD9A；
}
td:hover~td{
背景色：白色；
}

Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，
Lorem ipsum dolor sit amet，

您可以按相反的顺序插入单元格，然后通过旋转表格和每个单元格直观地更改顺序。现在您可以使用同级选择器

~

.table{
宽度：310px；
}
运输署：第n名儿童（1）{
宽度：200px；
}
.表格响应{
边框：1px实心；
宽度：340px；
填充：20px 10px 10px 30px；
边界半径：5px；
变换：旋转（180度）；
}
td:N个孩子（1），
td:N个孩子（2），
td:N个孩子（3），
运输署：第n名儿童（4）{
宽度：30px；
}
运输署{
转换：
    .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;
    }

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