Question

我想在icon结束时显示hover。数字100应该会消失，而是显示icon，新背景颜色为red。可以吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您不能隐藏文本节点而不隐藏整个范围，但是您可以通过使字体大小为0来伪造效果（并且可能将不透明度设置为0只是为了加倍安全）：

{{1}}

Answer 3

试试这个

＆＃13;

.aaa {
 text-align: center;
 color: green;
 background-color: black;
 width: max-content;
}
.aaa .bbb{
  display: block;
}
.aaa .fa{
 display : none;
}
.aaa:hover {
 background-color: red;
}
.aaa:hover .bbb .ccc {
 display: none;
}
.aaa:hover .fa{
 display : inline-block;
}

＆＃13;

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

＆＃13;

Answer 4

如果可以更改HTML markup，那么你可以尝试如下，甚至你需要更改它，就像目前.bbb class parent一样.fa的元素。因此，隐藏hover上的文字也会影响child元素上的样式，因此您可以从.fa标记中删除span标记，从而将它们并排排列然后你可以根据你的计划添加样式。

＆＃13;

.aaa{
   background-color: black;
   display:inline-block;
   color: yellow;
}
.aaa > .bbb{
  transition:1s ease;
}
.aaa:hover{
  background:red;
}
.aaa:hover > .fa{
  transition:1.2s ease;
}
.aaa:hover > .bbb{
  margin-left:-24px;
  opacity:0;
}
.aaa:hover > .fa{
  padding:0px 10px;
}

＆＃13;

<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</span><i class="fa fa-address-book" aria-hidden="true"></i>
</div>

＆＃13;

Answer 5

.bbb {
 text-align: center;
 color: green;
 background-color: black;
}
.aaa:hover .hide{displaY:none}
.aaa:hover i:before{
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="hide">100</span><span class="bbb"><i class="fa fa-address-book" aria-hidden="true"></i>
</span> 
</div>

尝试分隔不同范围内的文字和图标并添加悬停到父元素，上面的代码将为您解释其余部分

Answer 6

你想要消失100并显示图标，这里有一些动画：

 .aaa {
        background-color: black;
        display: inline-block;
        color: yellow;
        transition: 1s ease;
    }
    .aaa>.bbb { transition: 1s ease;}
    .aaa>.fa {
        opacity: 0;
        padding-right: 10px;
        transition: 1.2s ease;
    }
    .aaa:hover {
        background: red;
        transition: 1s ease;
    }
    .aaa:hover>.bbb {
        opacity: 0;
        transition: 1s ease;
    }
    .aaa:hover>.fa {
        padding-right: 10px;
        opacity: 100;
        transition: 1.2s ease;
    }

html与您的代码相同。

Answer 7

在主div上，您可以显示/隐藏子元素

＆＃13;

.bbb {
 text-align: center;
 color: green;
 background-color: black;
}
.aaa {
 text-align: center;
 color: green;
 background-color: black;
 width:50px;
}
.img-span{
  display:none;
}
.aaa:hover{
 background-color: red;
}
.aaa:hover .img-span{
 display:block;
}
.aaa:hover .bbb {
display:none;
 background-color: red;
}

＆＃13;

<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</span><span class="img-span"> <i class="fa fa-address-book" aria-hidden="true"></i></span> 

</div>

＆＃13;

在悬停时替换为图标

7 个答案: