如何在悬停时隐藏文本

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>