悬停后更改其他表格元素的样式答案

【问题标题】：Change other table element's style after hover悬停后更改其他表格元素的样式
【发布时间】：2016-05-30 07:48:01
【问题描述】：

这是我的表格：（我知道我必须使用 div 而不是表格）

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

将鼠标悬停在 .text-left 上时，我希望 .text-top 类具有另一种背景和颜色。表格还必须具有不同的框阴影。这是我的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;
}

我尝试过.text-left:hover ~ .table-fill、.text-left:hover + .table-fill 和.text-left:hover > .table-fill，但没有成功。

我还查看了Here、Here 和Here，但这并没有解决我的问题。

如果可能，我想避免使用 jQuery。

【问题讨论】：

标签： html css

【解决方案1】：

这是我的解决方案：

将激活更改为 .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);
}

希望它能创造出想要的效果

【讨论】：

【解决方案2】：

为什么不改变表格悬停本身的样式，因为您的所有内容都有 text-left 类，就像悬停在表格内的任何位置一样。这只是我的建议。

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

【讨论】：

【解决方案3】：

.table-filled 和 .text-top 既不是.text-left 的兄弟姐妹也不是后代，所以这不起作用。 jQuery 可能是你最好的选择。

【讨论】：