CSS悬停标记不在链接上工作

Question

我真的很擅长编码并尝试做一个非常非正式的网站模型。当鼠标悬停在一个链接上时，我正试图让一段文字显露出来。我知道悬停正在工作，因为链接变得粗体，因为我指示它，但我不能让文本显示自己。

this is my html code: I've got two div classes to differentiate what I want seen and hidden

this is my css. I know the first .hidden works at the text disappears, but for the life of me I can't get it to show up

如果有人有一个很棒的建议！我试图遵循非常相似的代码，以及其他人在建议中发布的内容。

here is the whole html code if that's helpful:

Answer 1

您的CSS / HTML错误。

.show-me:hover .hidden {}将适用于 .hidden内 .show-me类。因此，您将鼠标悬停在.show-me上，并显示.hidden

相反，你的两个div是彼此的兄弟姐妹。最简单的解决方案是隐藏在show-me中。

<div class="show-me">
  <a href="#">Pasta</a>
  <div class="hidden">Vegetarian</div>
</div>

编辑：

考虑一下，你可以使用兄弟选择器（JSBin）：

<div class="show-me"><a href="#">Pasta</a></div>
<div class="hidden">Vegetarian</div>

.hidden {
  display: none;
}

.show-me:hover +.hidden {
  display: block;
}