Changing the style of a table style after freezing

Question

Here is my table: (I know that I had to use divs instead of tables)

<table class="table-fill">
  <thead>
    <tr class="">
      <th class="text-top">
        <i class="fa fa-comments"></i></th>
      <th class="text-top">Service & Support</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span></td>
      <td class="text-left">TableData1</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span></td>
      <td class="text-left">TableData2</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span></td>
      <td class="text-left">TableData3</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span></td>
      <td class="text-left">TableData4 </td>
    </tr>
    <tr>
      <td class="text-left"></td>
      <td class="text-left"></td>
    </tr>
  </tbody>
</table>

Run codeHide result

I want to have a different background and color for the .text-top class when I hover over .text-left. The table should also have a different shadow. Here is my CSS:

.text-left:hover .table-fill {
    box-shadow: 0 26px 74px rgba(0, 0, 0, 0.69);
}

.text-left:hover .text-top {
   background:#fff;
   color:#4E5066;
}

Run codeHide result

I tried .text-left:hover ~ .table-fill, .text-left:hover + .table-filland .text-left:hover > .table-fillbut it didn’t work.

I also looked here , here and Here , but this does not fix my problem.

I want to avoid jQuery if possible.

Answer 1

, , . .

.table-fill:hover {

  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.69);

}


.table-fill:hover .text-top {

  background: #fff;
  color: #4E5066;

}

<table class="table-fill">
  <thead>
    <tr class="">
      <th class="text-top">
        <i class="fa fa-comments"></i>
      </th>
      <th class="text-top">Service & Support</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span>
      </td>
      <td class="text-left">TableData1</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span>
      </td>
      <td class="text-left">TableData2</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span>
      </td>
      <td class="text-left">TableData3</td>
    </tr>
    <tr>
      <td class="text-left"><span class="dashicons dashicons-arrow-right-alt2"></span>
      </td>
      <td class="text-left">TableData4</td>
    </tr>
    <tr>
      <td class="text-left"></td>
      <td class="text-left"></td>
    </tr>
  </tbody>
</table>

Hide result

Answer 2

.table-filled .text-top , .text-left, . jQuery, , .

Answer 3

:

.table-fill .text-left, :

.table-fill:hover .text-top {
  background:#fff;
  color:#4E5066;
}
.table-fill:hover {
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.69);
}

,