如何使文字隐藏在悬停中 [英] How to make the text hidden in hover

问题描述

我正在创建一个菜单，每个项目都有一个文本，悬停时将替换为电子邮件.因此，我不知道如何删除悬停中的文本.

I am creating a menu that each item has a text and in hover an email replaces. So I do not know how to remove the text in hover.

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

here is my code so far:

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

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

推荐答案

您无法使用css删除文本，但可以通过将其颜色设置为透明来使文本不可见，因此css将是:

You can not remove the text with css, but you can make the text invisible, by setting its color to transparent, so your css would be:

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

如果此解决方案存在布局问题，则还可以在文本周围换行另一个div，然后在:hover上将div的显示设置为none:

If you have layout problems with this solution, you could also wrap another div around the text, and then on :hover set the display of the div to none:

CSS

#home:hover .yourDivClassThatContainsText {
   display: none;
}

HTML

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

这篇关于如何使文字隐藏在悬停中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！