html – 悬停后更改其他表格元素的样式

2019年7月27日 181次阅读

这是我的表:(我知道我必须使用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类提供另一种背景和颜色.该表还必须具有不同的box-shadow.
这是我的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.

最佳答案 为什么不改变表格上的样式悬停本身,因为你的所有内容都有文本左侧类,就像悬停在表格内的任何地方一样.这只是我的建议.

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