如何使用 CSS 显示元素悬停的附加信息？

如何在悬停时突出显示元素并显示附加信息

您遇到了想要显示下拉列表的问题- 将鼠标悬停在特定元素上时类似区域，但您提供的方法未按预期运行。让我们探讨一下这个问题的解决方案。

一种方法是使用 CSS，但前提是隐藏的 div 是您悬停在其上的元素的直接子元素。操作方法如下：

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

#cheetah:hover #hidden {
  display: block;
  background-color: orange;
}

在此代码中，我们将“#cheetah”div 的位置设置为“相对”，这允许子元素相对于它定位。然后，我们将“#hidden”div 的位置设置为“absolute”，并将其初始显示样式设置为“none”。当您将鼠标悬停在“#cheetah”上时，我们使用“悬停”选择器将“#hidden”的显示样式更改为“块”，并将其背景颜色更新为橙色。

请记住，此方法仅有效如果“#hidden”div 是您将鼠标悬停在其上的元素的直接子元素。如果是这种情况，您可以单独使用 CSS 来实现所需的功能。否则，您可能需要考虑其他方法，例如使用 JavaScript，以获得所需的效果。

以上是如何使用 CSS 显示元素悬停的附加信息？的详细内容。更多信息请关注PHP中文网其他相关文章！