可能有点像 this question ,但 accepted 中的示例似乎不起作用。 我想在这里显示,操作按钮,悬停在行上。因此,当我将鼠标悬停在特定的表格行时,应该只显示该行的操作按钮,而所有其他按钮都应该隐藏。
那么我该如何实现呢? jQuery 是必需的还是可以通过纯 CSS 实现?
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
<a href="#" class="">Start</a>
</td>
</tr>
<tr>
<td>123456</td>
<td>
<a href="#" class="action">Start</a>
</td>
</tr>
</tbody>
</table>
最佳答案
它非常简单,可以用 CSS 完成。
您希望将鼠标悬停在 <tr>
元素(即 tr:hover
)上以更改后代(即 .action
)的显示属性。所以要使用的选择器是 tr:hover .action
。
这是工作片段:
.action {
display: none;
}
tr:hover .action {
display: inline;
}
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
<a href="#" class="action">Start</a>
</td>
</tr>
<tr>
<td>123456</td>
<td>
<a href="#" class="action">Start</a>
</td>
</tr>
</tbody>
</table>
您可以在此处阅读有关后代选择器的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
关于javascript - 如何在悬停表格行上显示各个表格单元格的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51759431/