3

Okay so I have an image,

<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>

Now, how do I make it so that "firstspan" only shows up when someone hovers over the "first" image? Here is what I tried for the css.

#firstspan {
    display: none;
}

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

but this doesn't seem to work. Any idea on what is wrong?

Also, is there a way for #first to be positioned inside the image on the bottom? Rather than outside the image?

4

4 回答 4

3

尝试这个

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

演示。

于 2013-07-16T04:32:03.680 回答
3 
.column:hover #firstspan {
    display: block;}

演示

于 2013-07-16T04:33:17.437 回答
2

您的解决方案不起作用，因为您的图像标签和跨度标签是兄弟姐妹。您的规则是寻找父子关系。

如果您可以将图像标签和跨度标签包装在 DIV 中，并将图像标签的 id 移动到这个新的容器 DIV，那么您的 CSS 应该可以工作。

<div id="first">
     <img>
     <span id="firstspan"></span>
</div>
于 2013-07-16T04:39:54.893 回答
-1 
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;
}
于 2013-07-16T04:33:04.517 回答