html - 如何在悬停在自身上时保持 html 显示？

Question

我之前在这里找到了这个解决方案。

.hiding {
    display: none;
}

.trigger:hover + .hiding {
    display:table-row;
}

它隐藏一个表格行，然后在将鼠标悬停在另一个表格行上时显示它(类触发器)。

问题:我想让 hiding 类在它也悬停在自身上时显示。当前，当您不再将鼠标悬停在类 trigger 上时，它会返回到 display:none。

Answer 1

您正在使用 + 这是一个相邻的元素选择器，我建议您将元素 .hiding 包装在另一个元素中，比如 class .test 而不是像这样改变你的选择器

.test .hiding {
    display: none;
}

.test:hover .hiding {
   display: table-row;
}

.trigger:hover + .test .hiding {
    display:table-row;
}

所以我们在这里做的是隐藏嵌套在 .test 中的元素，在本例中是 .hiding 然后我们使用第二个选择器 :hover 当带有 .test 的元素悬停时显示 .hiding(因为它存在，但为空 .hiding 是 display: none;) 最后但并非最不重要的是，我们在第三个声明中的 + 之后添加 .test，只是为了确保它不违反规则，因为 .hiding 不再与 .trigger 相邻，我们将 .test 作为 的相邻元素.触发器