Html 使用css选择悬停时的两个跨距

我试了很多，但是我被卡住了

实际上，我想将鼠标悬停在“Intro word”上，因此[必须将悬停结果应用于方形框]

.navbars>ul>li{
列表样式类型：无；
填充：20px；
}
.navbars>ul>li>a{
/*颜色：aliceblue；*//*由问题reveiwer注释，以获得可查看的片段*/
文字装饰：无；
}
.方舱导航{
宽度：15px；
高度：15px；
背景色：白色；
显示：内联块！重要；
不透明度：0；
}
.box导航内容{
右边距：1米；
显示：内联块！重要；
}
跨度：悬停{
不透明度：1！重要；
}

您需要使用同级选择器

相邻的同级组合符（+）分隔两个选择器，仅当第二个元素紧跟在第一个元素之后，并且两个元素都是同一父元素的子元素时，才与第二个元素匹配

.navbars>ul>li{
列表样式类型：无；
填充：20px；
}
.navbars>ul>li>a{
/*颜色：aliceblue；*//*由问题reveiwer注释，以获得可查看的片段*/
文字装饰：无；
}
.方舱导航{
宽度：15px；
高度：15px；
背景色：黑色/*黑色在这里看到我*/*白色*/；
显示：内联块！重要；
不透明度：0；
}
.box导航内容{
右边距：1米；
显示：内联块！重要；
}
span:悬停+span{
不透明度：1；
}

是你的第一个链接吗？确切地说，

square box

是什么？

框导航

？您的css代码未完全显示您尚未添加导航栏样式，您是否会尝试添加

显示：块

到span:hover css，让我知道它是怎么回事？

.box nav

是

span

的，不透明度为：0。。。应该是不透明度：悬停时为1。。。但是在你发布的代码中它们是空的，并且没有

.box导航内容

。。。我猜你把太多的精力放在了最小的方面，而没有把太多的精力放在可复制的方面