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>

现在，我该如何做到这样＆＃34;第一次＆＃34;只有当有人盘旋在＆＃34;第一＆＃34;图片？这是我为css尝试的内容。

#firstspan {
    display: none;
}

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

但这似乎不起作用。对于什么是错的任何想法？

另外，#first是否有办法定位在底部的图像内？而不是在图像之外？

Answer 1

试试这个

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

DEMO.

Answer 2

.column:hover #firstspan {
    display: block;}

Demo

Answer 3

您的解决方案不起作用，因为您的图片代码和范围标记是兄弟姐妹。你的规则是寻找后代关系的父母。

如果您可以将图像标记和范围标记包装在DIV中并将图像标记的id移动到此新容器DIV，那么CSS应该可以正常工作。

<div id="first">
     <img>
     <span id="firstspan"></span>
</div>

Answer 4

Try like this:

<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan"> your text </span>
</div>

#firstspan {
    display: none;
}

.column:hover #firstspan{
    display: inline;
}

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

4 个答案: