时间戳

首页 > 解决方案 > 关于将鼠标悬停在 HTML 表格行上时显示按钮

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

问题描述

我创建了一个 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 类的按钮都变得可见。有人可以花一点时间向我解释为什么不是这样吗？谢谢！

标签： htmlcssbootstrap-4

解决方案

td:hover .hidden-button将您的应用于嵌套在每个给定状态下的类的opacity: 1;元素。hidden-buttontdhover

推荐阅读