在鼠标悬停时增加字体真棒图标大小答案

【问题标题】：Make font-awesome icon size increase on mouseover在鼠标悬停时增加字体真棒图标大小
【发布时间】：2016-02-23 00:26:24
【问题描述】：

我在 bootstrap 4 卡上使用 font-awesome，当我将鼠标悬停在按钮上时，是否可以增加 font-awesome 图标的大小（右下角）？

在这种情况下<i class="fa fa-folder-open fa-5x"></i>

这是 HTML

                <div class="col-md-3 col-sm-6">
                    <div class="card card-inverse card-success">
                        <div class="card-block bg-success">
                            <div class="rotate">
                                <i class="fa fa-folder-open fa-5x"></i>
                            </div>
                            <center><a class="btn btn-success show" target="1" role="button"><h5 class="text-uppercase">open cases &nbsp;&nbsp;<i class="fa fa-arrow-circle-right fa-1x"></i></h5></a></center>
                            <h1 class="display-1"><center>7</center></h1>
                        </div>
                    </div>
                </div>

这是它目前的样子

【问题讨论】：

.card:hover .fa { font-size: 6em; } ?
或使用transform: scale() css。为.fa 添加transition 看起来更好，这样它就会动画。
不是没有javascript，没有父选择器，当你在按钮上hover时目标图标
不需要 JavaScript。 CSS :hover 应该可以工作。
@Philip，有没有办法针对特定的 fa ？你看看我是否使用你的解决方案它正在扩展我不想要的按钮上的箭头。

标签： css twitter-bootstrap font-awesome

【解决方案1】：

使用.card:hover > .card-block > .rotate > .fa { } 定位图标。

然后你可以使用font-size: 6em;放大字体或使用transform: scale() css。

为.fa 添加transition 看起来更好，这样它就会在悬停时进行动画处理。

编辑：transition 应该设置在.card > .card-block > .rotate > .fa { } 上（所以没有:hover）。

示例： .card > .card-block > .rotate > .fa { transition: font-size 0.35s ease; } .card:hover > .card-block > .rotate > .fa { font-size: 5em; }

（不要忘记添加带有前缀的额外规则以实现跨浏览器兼容性，请参阅 caniuse.com 或 W3schools 以供参考。）

【讨论】：

这看起来不错并且有效.. 现在使用过渡效果对其进行测试
我这样做了，它奏效了：.card:hover > .card-block > .rotate > .fa { font-size: 6em;过渡：1s 缓出；}
但我认为在鼠标移出时它可能不会动画..（因为 transition 的 CSS 规则不再适用）
查看编辑部分；只需创建 2 条规则：:hover -> 要更改的内容 2) 其他 -> transition
我试过这个但没有动画..card { transition: all .1s ease-in-out; }

【解决方案2】：

看看这可能对你有帮助

.rotate .fa.fa-folder-open:hover{
  font-size:6em;
  transition: 1s ease-out;
}

example

【讨论】：

当我将鼠标悬停在按钮而不是图标上时需要 .fa.fa-folder-open 展开
@user3436467 您可以通过使用一些 jquery 技巧来完成此操作，尝试类似 $('.fa.fa-folder-open').hide(); 的操作，然后对于其他操作 $('fa.fa-folder-close').show(); 您也可以在 jquery 中使用添加类选项，您可以制作这些东西以各种方式。对不起，这里的小姐姐 cmets 不是写代码的好地方。

【解决方案3】：

这是我用来创建缩放图标大小的悬停效果的示例。

<i class="fas fa-file-pdf" style="cursor: pointer"
   onmouseover="this.style.backgroundColor='#FFA500'; 
   this.style.transform='scale(1.2)'"

   onmouseout="this.style.backgroundColor='#FFFFFF'; 
   this.style.transform='scale(1.0)'"

   @click="iconClicked(data, 'pdf')"></i>

【讨论】：