Question

我尝试过使用text-indent，但这仅适用于第一行，如果我使用margin，文本根本不显示，我还能如何在悬停时显示文本？这是代码

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

如何在悬停时隐藏和显示第二行文本？仅限CSS

1 个答案: