如何在悬停在特定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

验证tr：hover，然后反转悬停的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 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

问候 ，

我找到了一种通过javascript（JQuery）做到这一点的方法，您还需要在tr下的每个td中添加一个类

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

说明 ：

使用.hover Jquery函数设置每个col的样式，我使用循环从第一个col到鼠标悬停在其上的col进行样式设置，删除时我使用了完全相同的代码，但是将背景样式设置为白色（您可以更改背景颜色继承还是自己继承）

问候

Answer 4

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

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