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

概述这是我的表:(我知道我必须使用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 这是我的表:(我知道我必须使用div而不是表格)

<table >  <thead>    <tr >      <th >        <i ></i></th>      <th >Service & Support</th>    </tr>  </thead>  <tbody >    <tr>      <td ><span ></span></td>      <td >tableData1</td>    </tr>    <tr>      <td ><span ></span></td>      <td >tableData2</td>    </tr>    <tr>      <td ><span ></span></td>      <td >tableData3</td>    </tr>    <tr>      <td ><span ></span></td>      <td >tableData4 </td>    </tr>    <tr>      <td ></td>      <td ></td>    </tr>  </tbody></table>

当我将鼠标悬停在.text-left上时,我希望为.text-top类提供另一种背景和颜色.该表还必须具有不同的Box-shadow.
这是我的CSS：

.text-left:hover .table-fill {    Box-shadow: 0 26px 74px rgba(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.69);}.table-fill:hover .text-top {  background: #fff;  color: #4E5066;}

<table >  <thead>    <tr >      <th >        <i ></i>      </th>      <th >Service & Support</th>    </tr>  </thead>  <tbody >    <tr>      <td ><span ></span>      </td>      <td >tableData1</td>    </tr>    <tr>      <td ><span ></span>      </td>      <td >tableData2</td>    </tr>    <tr>      <td ><span ></span>      </td>      <td >tableData3</td>    </tr>    <tr>      <td ><span ></span>      </td>      <td >tableData4</td>    </tr>    <tr>      <td ></td>      <td ></td>    </tr>  </tbody></table>

总结

以上是内存溢出为你收集整理的html – 悬停后更改其他表格元素的样式全部内容，希望文章能够帮你解决html – 悬停后更改其他表格元素的样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。