html - 替换为悬停时的图标

Question

当 悬停 时，我试图显示一个 icon。数字 100 应该消失，而是显示 icon，新背景颜色为 red。可以做吗？

.bbb {
 text-align: center;
 color: green;
 background-color: black;
}

.bbb:hover {
 background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="aaa">
  <span class="bbb">100
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </span> 
</div>  

Answer 1

你可以尝试这样的事情。您应用 font-size:0 来隐藏文本并使用 min-width 来保持容器的相同大小:

.aaa i{
  display:none;
  
}
.bbb {
 text-align: center;
 color: green;
 min-width:40px;
 display:inline-block;
 background-color: black;
 transition:0.5s;
}


.aaa:hover .bbb {
 background-color: red;
 font-size:0;
}
.aaa:hover i {
  display:inline;
  font-size:initial;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="aaa"><span class="bbb">100<i class="fa fa-address-book" aria-hidden="true"></i>
</span> 
</div>