如何在鼠标悬停时隐藏文本

Question

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

以下是我的代码:

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

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

- Alex Jj

---

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

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>

- bpoiss

Answer 2

当鼠标悬停时，您可以将颜色设置为透明。

- G-Cyrillus

---

这是一个注释，而不是一个答案。 - underscore

感谢欢迎我来到这里，以下是回答问题的解决方案。 - G-Cyrillus

Answer 3

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

Html

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

CSS

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

为了使它更加优美，将这个.transition类添加到与你的DivClassThatContainsText相同的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;}

感谢，希望我有帮助。

- Ste Mappo

Answer 4

如果有人正在寻找另一种更简单的方法，只需将以下内容添加到CSS hover容器中：

font: 0/0 a;

关于字体 shorthand 属性的更多信息，请参见此处： 另一种 CSS 图像替换技术

- nerdrocker