Css 如何使文本隐藏在悬停中

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

以下是我目前的代码：

#主页{
字体：30px'Leaguegothicrular'，Arial，无衬线；
颜色：#f9f8cc；
}
#主页：悬停{
背景：url（style/images/icon/home.png）#FFF；
背景尺寸：83px 56px；
}

您可以将color:设置为transparent on:hover

您不能使用css删除文本，但您可以通过将文本的颜色设置为transparent使其不可见，因此您的css将：

#主页：悬停{
颜色：透明；
背景：url（style/images/icon/home.png）#FFF；
背景尺寸：83px 56px；
}

如果此解决方案存在布局问题，还可以在文本周围环绕另一个

div

，然后启用：悬停将div的显示设置为

none

：

CSS

#主页：悬停。包含文本的YourDivClass{
显示：无；
}

HTML

文本文本文本

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

字体：0/0A

有关字体速记属性的详细信息，请参见此处：

---

您也可以使用不透明度，这是如何：

Html

为了使其更美观，请将此.transition类添加到包含Text的DivClasses所在的同一个div中。下面是transition类：

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

---

谢谢希望我能帮忙

这应该是评论而不是回答？？谢谢欢迎我来到这里，这是一个回答问题的解决方案，你能在上面设置一个简化的演示吗？

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

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