1

キャプションに問題があります。
写真にカーソルを合わせたときに、各写真の下にキャプションを表示するにはどうすればよいですか。

問題は、それらがすべて左下隅の片側に表示されることです。

HTMLコードは次のとおりです。

<div id="content2">
<ul style="width: 5020px; height: 600px;">  
<li class="image" style="width: 392px;"><img src="images/pr1x.jpg" ><p class="caption">1st    caption</p></li>
<li class="image" style="width: 392px;"><img src="images/pr2x.jpg" ><p class="caption">2st    caption</p></li>
</ul></div>

CSSコードは次のとおりです。

li.image p.caption {
position:absolute;
display: none;
font-size: 28px;
color: red;
}
li.image:hover p.caption {
display: list-item;
}​
#content2{
width: 150%;
height: 600px;
float:left;
overflow:hidden;
}
#content2 p{
width: 150%;
}
.scrollbar-hor{
background-color: #e5e2de;
height: 24px;
width: 150%;
float:left;             
}
.handle-hor{
height: 25px;
width: 400px;
background: url(http://brafitting.info/images/bar.jpg) no-repeat;
}
4

1 に答える 1

0

新しい HTML5 要素figureとfigcaption
http://html5doctor.com/the-figure-figcaption-elements/を試してみます

HTML

<ul>
    <li>
        <figure>
            <img src="http://lorempixel.com/100/200">
            <figcaption>Caption</figcaption>
        </figure>
    </li> 
    <li>
        <figure>
            <img src="http://lorempixel.com/100/200">
            <figcaption>Caption</figcaption>
        </figure>
    </li>
</ul>

CSS

figcaption  {  display: none;}
figure:hover figcaption {display: block;}
li {display:inline-block;border: 1px solid green;}
figure {border: 1px solid gold; margin:0;}
ul { margin: 0; padding:0; 1px solid blue;}
li { margin:0; padding:0;vertical-align: top;}

http://jsfiddle.net/5Pcxv/10/

于 2012-12-01T17:01:47.407 に答える