html - 带有图像、文本和 z-index 的 CSS 悬停

Question

因此，我一直在尝试仅使用 CSS 重新创建在 oudolf.com 上发现的悬停消失/重新出现的图像效果。

我已经走到这一步了:https://jsfiddle.net/cj5781ug/但我不知道如何设置 z-index 的样式，使 div.text 保持在所有其他内容之上，这样我就可以从一个文本悬停到另一个文本，而不必离开整个图像。

或者，我可以将其设置为其他文本 (h3) 不会在图像上方显示，但您必须离开图像才能选择其他文本。在这里看到:https://jsfiddle.net/ogjh96rb/

我知道 Javascript 会让我的生活更轻松，但我想在学习 Javascript 之前练习我的 CSS 并尝试尽可能多地使用 CSS。

Answer 1

你没有把 h3 放在文本 div 中

改变它以便

<div class="text"></div>
<h3>Chicago</h3>

是

<div class="text">
    <h3>Chicago</h3>
</div>

https://jsfiddle.net/9c9ye9sk/我只是为了芝加哥而改变它给你看

还要将所有城市名称放在同一个 z 索引中，因为对于某些名称而言，并非所有名称都位于图像上方。