Html CSS避免绝对位置div的透明背景

我有一个div，它在悬停时隐藏/显示。位置集是绝对的，因此div的背景变得透明。如果“位置”设置为“相对”，则悬停时父div高度会受到影响。那么，背景如何才能阻止内容不可见呢

需要css的解决方案。 给定样本->

$（文档）。准备好了吗(
函数（）{
$（“#hover”）.hover（函数（）{
$（“#消息”）.toggle（）；
});
});
#消息{
边框：1px实心；
填充：10px；
盒影：5px10px#8888888；
位置：绝对位置；
显示：无；
}

隐藏内容

这是一个非常大的内容，与背景中的内容重叠。

因此不应看到背景中的内容。
这是另一个文本，其内容应隐藏在弹出窗口下。

再添加一个文本，即使隐藏内容可见，其内容也可见。
您需要白色背景

也可以相应地更改宽度

编辑：您已经在使用jQuery=/


$（文档）。准备好了吗(
函数（）{
$（“#hover”）.hover（函数（）{
$（“#消息”）.toggle（）；
});
});
#消息{
边框：1px实心；
填充：10px；
盒影：5px10px#8888888；
位置：绝对位置；
显示：无；
背景：#FFF；
宽度：90%；
}

隐藏内容

这是一个非常大的内容，与背景中的内容重叠。

因此不应看到背景中的内容。
这是另一个文本，其内容应隐藏在弹出窗口下。

又添加了一个文本，即使隐藏内容可见，其内容也可见。
我已通过添加Z索引和背景色更新了您的代码。希望这就是你要找的


$（文档）。准备好了吗(
函数（）{
$（“#hover”）.hover（函数（）{
$（“#消息”）.toggle（）；
});
});
#消息{
边框：1px实心；
填充：10px；
盒影：5px10px#8888888；
位置：绝对位置；
显示：无；
z指数：9；
背景：#fff
}

隐藏内容

这是一个非常大的内容，与背景中的内容重叠。

因此不应看到背景中的内容。
这是另一个文本，其内容应隐藏在弹出窗口下。

再添加一个文本，即使隐藏内容可见，其内容也可见。
位置设置为绝对位置，因此div的背景变为透明。
？将Z索引和背景色添加到“#消息”-例如Z索引：9，背景色：#fffBackground颜色与绝对位置无关，默认的bg颜色是透明的，无论其位置如何。
需要css解决方案，而不需要使用jQuery。
-->作为旁注，您已经在使用jQuery来实现非常简单的csstask@TemaniAfif当前位置我正在尝试，但在这里不起作用。我的项目是用AngularJs实现的