3

さて、イメージがありますので、

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

さて、誰かが「最初の」画像にカーソルを合わせたときにのみ「最初のスパン」が表示されるようにするにはどうすればよいですか? これが私がcssのために試したことです。

#firstspan {
    display: none;
}

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

しかし、これはうまくいかないようです。何が間違っているかについて何か考えはありますか？

また、一番下の画像内に #first を配置する方法はありますか? イメージの外というより？

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

image タグと span タグが兄弟であるため、ソリューションは機能しません。ルールは、親から子孫への関係を探しています。

イメージ タグとスパン タグを 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 に答える