css - 如何在将鼠标悬停在某个图像上后显示具有特定 id 的文本

Question

好的，我有一张图片，

<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan">This is what should appear when hovering over first image</span>
</div>

现在，如何才能让“firstspan”仅在有人将鼠标悬停在“first”图像上时显示？这是我为 css 尝试的内容。

#firstspan {
    display: none;
}

#first:hover #firstspan {
    display: block;
}

但这似乎行不通。知道哪里出了问题吗？

此外，有没有办法让#first 位于图像底部？而不是在图像之外？

Answer 1

试试这个

img#first:hover ~ #firstspan {
    display: block;
}

DEMO.