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

时间：2017-06-22 06:40:45

标签： css css3

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

enter image description here

因此，当我将鼠标悬停在图标上时，该特定行中的所有图标和文字都会更改其背景。

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

这是我的HTML 

<counter-button></counter-button>

和样式 

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

4 个答案:

答案 0 :(得分：2)

验证tr：悬停而不是反转悬停的td后的颜色。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用伪元素

来使用脚本或类似内容

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

<强>问候语，

我通过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的col 也在悬停删除我使用完全相同的代码，但风格背景回白色（你可以改变背景颜色继承或为您自己）

此致

答案 3 :(得分：0)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题