4

Here is my table: (I know 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>
I want to have another background and color for the .text-top class when hovering over .text-left.The table must also have a different box-shadow. Here 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;
}

I've tried .text-left:hover ~ .table-fill, .text-left:hover + .table-fill and .text-left:hover > .table-fill but this didn't work.

I also looked Here, Here and Here, but this was not fixing my problem.

I want to avoid jQuery if possible.

Community
  • 1
  • 1
mishad050
  • 448
  • 5
  • 15

3 Answers3

1

Why not change the style on table hover itself, since all of your content has text-left class, its like hovering anywhere inside the table. This is just my suggestion.

.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>
Ralph John Galindo
  • 1,190
  • 6
  • 11
0

.table-filled and .text-top is neither a sibling or descendant of .text-left so this will not work. jQuery is probably your best bet.

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
johanla
  • 1
  • 1
0

This is my solution:

Change the activation to be .table-fill instead of .text-left like the following:

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

Hope it creates the desired effect

Community
  • 1
  • 1
T04435
  • 12,507
  • 5
  • 54
  • 54