如何仅使用 CSS 在悬停时显示隐藏的 DIV？

用于在悬停时显示隐藏 DIV 的 CSS 唯一解决方案

所提出的挑战涉及一个包含三个最初隐藏的 DIV 的菜单，这些 DIV 应该根据以下条件变得可见用户的菜单选择仅使用CSS。这是为了确保即使在禁用 JavaScript 时也可访问。

仅 CSS 方法

要在没有 JavaScript 的情况下实现此目的，“复选框黑客”就发挥了作用。此方法利用复选框输入元素，并使用 :checked 伪选择器根据其选中或未选中状态分配样式。可以通过将复选框与标签关联来隐藏该复选框。

示例代码

考虑以下示例代码：

<input type="checkbox">

input[type="checkbox"]:checked + div {
  display: block;
}

在此示例中，当选中选项 1 的复选框时，“content-1”DIV 将变得可见。同样，选中选项 2 的复选框将显示“content-2”DIV。

附加说明

关于客户对滑动/淡入淡出效果的请求，这可以通过 JavaScript 实现。然而，对于仅 CSS 的解决方案来说，这是不可行的。或者，您可以考虑使用 CSS 过渡来创建微妙的淡入效果。

以上是如何仅使用 CSS 在悬停时显示隐藏的 DIV？的详细内容。更多信息请关注PHP中文网其他相关文章！