css - 如何更改所有 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

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