html - 如何显示鼠标悬停时隐藏的文本？

Question

这是我的 HTML:

<div id="clients">
<h1> Clients </h1>
<div class="mnlaownrs">
  <img src="img/img.png" width="226" height="" alt="manilaowners"></img><br>
  <a href="#" class="mnlacaption">
    <h4>ManilaOwners</h4>
  </a>
</div>
<br>

...这是我的 CSS:

.mnlaownrs {
    position: relative;
    float: left;
    background-color: #544334;
    height: 82px;
    padding: 3px;
    margin-left: 20px;
}

a.mnlacaption {
    position: absolute;
    bottom: 0;
    width: 236px;
}


a.mnlacaption:hover {
    position: absolute;
    bottom: 3px;
    width: 236px;
    height: 86px;
    background: rgba(0,0,0,.90);
    text-indent: center;
    visibility: visible;
}

如果 .mnlacaption 处于正常状态，我如何隐藏它的文本，但让它在悬停时显示？

Answer 1

设置a.mnlacaption初始为display:none(隐藏)，然后当包含div时，.mnlaownrs ，处于hover状态，修改样式为display:block

.mnlaownrs a.mnlacaption
{
display:none;
}

.mnlaownrs:hover a.mnlacaption
{
display:block;
}

或者，如果您希望在隐藏此元素时不影响页面其余部分的位置，请改用 visibility:

.mnlaownrs a.mnlacaption
{
visibility:hidden;
}

.mnlaownrs:hover a.mnlacaption
{
visibility:visible;
}