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

Answer 2

a.mnlacaption {
   text-indent:-9999px;
}


a.mnlacaption:hover {
   text-indent:0;
}

应该做的伎俩：）

Answer 3

试试这个：

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

并在:hover上将其设为display: inline。

Answer 4

a.mnlacaption {

    visibility: hidden;
}
a.mnlacaption:hover {

    visibility: visible;
}

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

4 个答案: