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

之所以可行，是因为您专门针对html内部的所有td元素，因此，只要将鼠标悬停在td上，就可以将表格内所有td元素的td元素作为目标。

.box {
height:100px;
width:100px;
background-color:black;
margin:10px;
float:left
}

.box:hover {
background-color:red
}

<div class="box box1">1</div>
<div class="box box2">2</div>

Answer 2

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

Answer 3

您的以下CSS代码在所有TD上全局应用

sys.excepthook

}

Answer 4

td:hover .hidden-button实际上仅指鼠标悬停在td内的hidden-button。因此，当鼠标悬停在td元素上时，只会显示一个元素。

在CSS中，您通过从左到右阅读代码来进入父级到子级。

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

4 个答案: