Question

我正在创建一个菜单，每个项目都有一个文本，并悬停一个电子邮件替换。所以我不知道如何在悬停中删除文本。

到目前为止，这是我的代码：

#home {
    font: 30px 'LeagueGothicRegular', Arial, sans-serif;
    color: #f9f8cc;
}

#home:hover {
    background:url(style/images/icon/home.png) #FFF;
    background-size: 83px 56px;
}

Answer 1

你不能用css删除文本，但你可以通过将文本的颜色设置为透明来使文本不可见，所以你的css将是：

#home:hover {
   color: transparent;
   background:url(style/images/icon/home.png) #FFF; 
   background-size: 83px 56px; 
}

如果此解决方案存在布局问题，您还可以在文本周围再打包div，然后打开：hover将div的显示设置为none：

<强> CSS

#home:hover .yourDivClassThatContainsText {
   display: none;
}

<强> HTML

<div id="home">
   <div class="yourDivClassThatContainsText">
      Text Text TExt
   </div>
</div>

Answer 2

你可以设置颜色：透明：悬停

Answer 3

如果有人正在寻找另一种更简单的方法，只需将其添加到CSS悬停容器中即可：

font：0/0 a;

有关字体速记属性的更多信息，请访问： Another CSS image replacement technique

Answer 4

你也可以使用不透明度，这是这样的：

HTML

 <div id="home">
   <div class="yourDivClassThatContainsText">
      Text Text TExt
   </div>
</div>

CSS

.yourDivClassThatContainsText{opacity:1;}
.yourDivClassThatContainsText:hover{opacity:0;}

为了使它真的很好，将这个.transition类添加到同一个div中，其中yourDivClassThatContainsText在这里是过渡类：

.transition{-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}

谢谢希望我帮助

如何在悬停时隐藏文本

4 个答案: