html - 关于将鼠标悬停在 HTML 表格行上时显示按钮

Question

我创建了一个 HTML 表格，其中一列专用于默认情况下不可见的按钮。当您将鼠标悬停在一行上时，相应的按钮就会变得可见。这一切都很好，下面是 HTML 和 CSS 的示例。

HTML:

<table>
    <tr>
        <td></td>
        <td></td>
        <td><button  class="btn btn-danger btn-sm hidden-button">Delete</button></td>
    </tr>
</table>

CSS:

.hidden-button {
    opacity:0;
}

td:hover .hidden-button {
    opacity:1;
}

但我的问题是，为什么这样做有效？我正在试验，但完全希望所有带有 .hidden-button 类的按钮都可见。有人可以花点时间向我解释为什么不是这样吗？谢谢!

Answer 1

td:hover .hidden-button应用你的 opacity: 1;使用 hidden-button 的元素嵌套在每个给定 td 下的类那是在 hover状态。