2

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

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

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

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

4 回答 4

9

您不能使用 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>
于 2013-06-03T18:17:16.980 回答
3

您可以将颜色：设置为透明：悬停

于 2013-06-03T18:12:58.733 回答
1

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

字体：0/0 a；

此处有关字体速记属性的更多信息： 另一种 CSS 图像替换技术

于 2014-08-25T00:28:33.127 回答
1

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

Html

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

CSS

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

为了使它非常好，将此 .transition 类添加到 yourDivClassThatContainsText 所在的同一个 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;}

谢谢希望我帮助

于 2017-03-29T22:21:47.007 回答