在鼠标悬停时增加字体超棒的图标大小
Make font-awesome icon size increase on mouseover
我在 bootstrap 4 张卡片上使用超赞字体,当我将鼠标悬停在按钮上时,是否可以增加超赞字体图标(右下角)的大小?
在这种情况下 <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 <i class="fa fa-arrow-circle-right fa-1x"></i></h5></a></center>
<h1 class="display-1"><center>7</center></h1>
</div>
</div>
</div>
这是目前的样子
看看这对你有帮助
.rotate .fa.fa-folder-open:hover{
font-size:6em;
transition: 1s ease-out;
}
使用 .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 以供参考。)
这是我用来创建缩放图标大小的悬停效果的示例。
<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>
我在 bootstrap 4 张卡片上使用超赞字体,当我将鼠标悬停在按钮上时,是否可以增加超赞字体图标(右下角)的大小?
在这种情况下 <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 <i class="fa fa-arrow-circle-right fa-1x"></i></h5></a></center>
<h1 class="display-1"><center>7</center></h1>
</div>
</div>
</div>
这是目前的样子
看看这对你有帮助
.rotate .fa.fa-folder-open:hover{
font-size:6em;
transition: 1s ease-out;
}
使用 .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 以供参考。)
这是我用来创建缩放图标大小的悬停效果的示例。
<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>