css - 如何使文字隐藏在悬停中

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>