纯CSS弹出窗口（当鼠标悬停在上一行时使用CSS显示/隐藏行）

Question

当我在PREVIOUS行上操作时，如何仅使用CSS折叠/显示表格行。当我将鼠标悬停在表格行上时，基本上会弹出更多信息。

Answer 1

让我们说要调用“上一行”类.previousRow，以及要更改的行.popUp。

让我们假设.popUp的显示为display:none;，您当前无法看到它。

尝试在CSS中使用它：

.previousRow:hover + .popUp {display:block;}

---

这将选择popUp悬停事件中的previousRow类并更改其显示。

您还可以将该显示属性与您要在上一行:hover添加的任何其他内容互换。

希望这有帮助！

Answer 2

我认为这可以解决你的问题：

＆＃13;

＆＃13;

.table1 tr {
  border: solid 1px #000;
  display: block;
}

.table1 tr:hover + tr  {
  display:none;
}

＆＃13;

<table class='table1'>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
 </table>

＆＃13;

＆＃13;

＆＃13;

选择器.table1 tr:hover + tr将选择正在悬停的行的下一行。