[HTML] [CSS]在悬停时显示div，有针对性

Question

在悬停时显示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>

Answer 1

尝试以下

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

Answer 2

由于'+'选择器

的行为，只有第二个div上的悬停才有效

https://www.w3schools.com/cssref/sel_element_pluss.asp

W3C说什么：

选择并设置在 div元素后立即放置的每个p元素的样式：

div + p { 
    background-color: yellow;
}

Answer 3

您可以使用以下命令隐藏div：jQuery：

<div id=“div”>

</div>

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