Html 悬停在上方时显示隐藏的div

我有一个隐藏的

div

，我想在它悬停在CSS上时显示它。不幸的是，无论我做什么，CSS悬停选择器似乎都不起作用。在chrome开发者的工具中，我可以通过强制：hover状态来显示div，但否则它就不起作用了

这是我的密码

。不可见{
显示：无；
边框：2倍纯红；
}
.隐形：悬停{
显示：块；
}

文本文本文本

显示为“无”的元素不能悬停在上方，因为它不占用文档中的任何空间。您可以先将元素的

opacity

设置为

0

，然后在悬停时将

opacity

更改为

1

，使其不可见，但仍占用文档中的空间，因此可以悬停

。不可见{
不透明度：0；
边框：2倍纯红；
}
.隐形：悬停{
不透明度：1；
}

文本文本文本

。不可见{
不透明度：0；
边框：2倍纯红；
过渡：所有1；
}
.隐形：悬停{
不透明度：1；
过渡：全部1.5s；
}

文本文本文本

看看这把小提琴，这可能会有帮助，你正在努力实现的目标。 可以使用父div标注调整悬停区域。

.parent{
填充：20px；
}
.父母，孩子{
显示：无；
背景：红色；
填充：20px；
文本对齐：居中；
}
.parent:悬停.child{
显示：块；
}

你好，世界！

您可以使用

可见性

：

.content.不可见{
可见性：隐藏；
边框：2倍纯红；
}
.内容：悬停。不可见{
能见度：可见；
}

文本文本文本

我试图使用css，而不是SCS。我在回答中添加了css。你可以从这里复制它。我需要隐藏div本身。如果你不想创建父div，你可以使用body标签或任何其他现有的父div。像这样。我希望div本身被隐藏，而不仅仅是文本。@xyz我已经更新了我的答案。您只需要在其上方添加另一个div。