这是我的表格:(我知道我必须使用 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: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。
最佳答案
为什么不更改表格悬停本身的样式,因为您所有的内容都有 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>
关于html - 悬停后更改其他表格元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35476485/