Html 悬停更改id特定分区

这是我之前问过的另一个问题的解决方法（） 我正在尝试构建一个导航栏，当您将鼠标悬停在相应的导航栏项目上时，它会显示更深入的搜索词

现在我想我已经接近一个解决方案了：我创建了这个单独的div，只要您将鼠标悬停在“Produkte”/#navigation-item2上就可以看到它。现在，按照我习惯的方式：悬停，这不起作用。我怎样才能做到这一点

.navigation{
宽度：100%；
高度：自动；
最大高度：20vh；
背景：白色；
显示器：flex；
;
对齐项目：居中；
证明内容：中心；
}
.导航项{
位置：相对位置；
身高：10%；
宽度：15%；
字体大小：1.2米；
颜色：黑色；
字体大小：粗体；
填充：0.5em 1em 0.5em 1em；
利润率：0px1%0px1%；
文本对齐：居中；
文本转换：大写；
过渡：背景200ms线性；
文字装饰：无；
}
.导航项：悬停{
背景：浅灰色；
}
.导航菜单{
高度：200px；
位置：绝对位置；
宽度：100%；
最大高度：25vh；
不透明度：0；
}
#导航项目2：悬停导航菜单2{
不透明度：1
}

什么是

#navigation-item2:hover#nav-menu2

意思是，当父项navigation-item2悬停时，它以子元素#nav-menu2为目标

您需要做的是将

#nav-menu2

移动到nav标记内，因为您只能将兄弟元素（使用

+

或

~

）或子元素作为目标

我移动了

#nav-menu2

，因此它直接跟随相关的

标记。然后您可以使用
#navigation-item2:hover+#nav-menu2
将不透明度增加到1

通过在DOM中以相同的顺序定位每个子菜单，您甚至可以更进一步，我在下面的代码中展示了这种情况，仅使用类

为了演示，我将
#nav-menu2
的起始不透明度更改为0.1。我还将
#nav-menu2
定位在
.navigation
的底部对齐（因此，将
位置：relative
添加到
.navigation
），然后将其全高（100%）转换为导航栏下的#nav-menu2位置


我甚至会更进一步，将
#nav-menu2
放在
#navigation-item2
中，这样您就可以自动获得正确的x位置。它还可以解决在
导航项
之外查看悬停状态的问题。但我把这件事留给你来解决


.navigation{
位置：相对；/*已添加*/
宽度：100%；
高度：自动；
最大高度：20vh；
背景：白色；
显示器：flex；
;
对齐项目：居中；
证明内容：中心；
}
.导航项{
身高：10%；
宽度：15%；
字体大小：1.2米；
颜色：黑色；
字体大小：粗体；
填充：0.5em 1em 0.5em 1em；
利润率：0px1%0px1%；
文本对齐：居中；
文本转换：大写；
过渡：背景200ms线性；
文字装饰：无；
}
.导航项：悬停{
背景：浅灰色；
}
.导航菜单{
高度：200px；
底部：0px；/*已添加*/
变换：translateY（100%）；/*添加*/
位置：绝对位置；
宽度：100%；
最大高度：25vh；
不透明度：0.1；/*已更改*/
}
.navigation项：悬停+导航菜单{/*已更改*/
不透明度：1；
}









在CSS中不能这样访问。请查看：