[HTML][CSS]悬停时显示div，目标

在悬停显示div时，如何将特定div作为目标？ 我需要从页面顶部的链接中显示一个隐藏的div，我不知道如何显示。 当我测试时，如果链接和div是一个接一个的，它会正确显示。但是，如果我在第一个链接之前添加另一个链接，它将不再起作用。 根据我使用此CSS进行的测试：

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

这个HTML：

<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>

展开
扩大
可扩展

试试下面的方法

.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

---

由于“+”选择器的行为，只有第二个div上的悬停有效

W3C说：

选择紧跟在div元素之后放置的每个p元素并设置其样式：

div + p { 
    background-color: yellow;
}

---

您可以使用：jQuery:

<div id=“div”>

</div>

<script>
$(“#div”).hide("slow"); // you can change "hide" to "show" 
</script>

$（“#div”）.hide（“slow”）；//您可以将“隐藏”更改为“显示”

可能需要添加

+

是相邻的同级选择器，而

~

是一般同级选择器这是我一直在寻找的答案，很难找到，谢谢！魔术师会变魔术。我可以使用jQuery，但我一直在寻找一种不用jQuery的方法。我对“~”做了大量研究，序列需要共享文档树的同一父级。我给出的示例是我的核心的简化版本。初始代码将两个序列置于其他结构中：（所以我需要再搜索一点。