Как я могу получить вторую строку текста, чтобы скрыть и показать при наведении? CSS только

Question

Я пробовал использовать текстовый отступ, но это применимо только к первой строке, и если я использую margin, текст вообще не отображается, как еще я могу сделать текстовое шоу на hover? вот код

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); 
} 

here является скрипку

Answer 1

Если вы просто хотите, чтобы скрыть весь заголовок, пока не найдете пользователь наводится на цифру, используйте:

.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; 
}