如何使文本隐藏在悬停中答案

【问题标题】：How to make the text hidden in hover如何使文本隐藏在悬停中
【发布时间】：2013-05-29 23:30:43
【问题描述】：

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

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

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

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

【问题讨论】：

你能在jsfiddle上设置一个简化的演示吗？

标签： css visibility hidden font-size

【解决方案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>

【讨论】：

【解决方案2】：

你可以在 :hover 上设置 color: 为透明

【讨论】：

这应该是评论而不是答案
??感谢您在这里欢迎我，这是回答问题的解决方案

【解决方案3】：

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

字体：0/0 a；

关于字体速记属性的更多信息在这里： Another CSS image replacement technique

【讨论】：

【解决方案4】：

您也可以使用不透明度，方法如下：

html

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

CSS

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

为了让它非常好，将这个 .transition 类添加到 yourDivClassThatContainsText 所在的同一个 div 是转换类：

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

谢谢希望对我有帮助

【讨论】：