0

text-indent を使用してみましたが、これは最初の行にのみ適用され、マージンを使用するとテキストがまったく表示されない場合、ホバー時にテキストを表示するにはどうすればよいですか? ここにコードがあります

HTML: 

<img src=""  width="270" height="182"/>

<figcaption>
 <ul>
  <div style="top:0px; left:0px;width=270 height=182">


  <a href="">Title</a><BR>
  <a href="">Item 1</a><BR>
  <a href="">Item 2</a><BR>
  <a href="">Item 3</a><BR>
  <a href="">Item 4</a>
  </div>


 </ul>

</figcaption>

CSS:

.annotated{
position:relative;
}

.annotated img{ 
display:block;
}

.annotated ul{ 
list-style:none;
position:absolute; 
top:0;
right:0;
bottom:0;
left:0;
}

.annotated div{
display:block;
padding:0 5px;
width:270px; 
line-height:15px;
position:absolute;
text-indent:-99999px; 
cursor:default;
}

.annotated div:hover { 
background:#fff;
background:rgba(255,255,255,0.75);
z-index:2; 
width:260px;
text-indent:0;

-webkit-box-shadow:0 0 5px rgba(0,0,0,0.25);
   -moz-box-shadow:0 0 5px rgba(0,0,0,0.25);
       box-shadow:0 0 5px rgba(0,0,0,0.25);
}

ここにフィドルがあります

4

1 に答える 1

0

ユーザーが図にカーソルを合わせるまでキャプション全体を非表示にする場合は、次を使用します。

.annotated figcaption {
    display: none;
}

.annotated:hover figcaption {
    display: block;
}

タイトルを常に表示し、他のリンクはホバー時にのみ表示する場合は、次を使用します。

.annotated figcaption a {
    display: none;
}

.annotated figcaption a:first-child {
    display: inline;
}

.annotated:hover figcaption a {
    display: inline;
}
于 2013-03-30T02:08:20.790 に答える