FontAwesome Icons 仅在鼠标悬停时旋转?
-
21-12-2019 - |
题
在很棒的字体中,我如何使用此代码: <i class="fa fa-spinner fa-spin"></i>
仅适用于鼠标悬停?
解决方案
您也可以创建另一个仅用于悬停的类,而不是覆盖该类:
.fa-spin-hover:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
<i class="fa fa-circle-o-notch fa-spin-hover"></i>
<i class="fa fa-spinner fa-spin-hover"></i>
小提琴: http://jsfiddle.net/Xw7LH/1/
笔记:如果使用 Font-Awesome 4.2+,您可能需要使用“fa-”命名动画:
.fa-spin-hover:hover {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
其他提示
您还可以将 javascript 与 jquery 库一起使用:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
}, function() {
$(this).removeClass('fa-spin');
});
这将使它只在悬停时旋转,并在结束时重置回其原始位置 - 也就是说,它与某些图标一起看起来很奇怪(我只将它与齿轮一起使用)。对于悬停时无限旋转,你可以这样做:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
});
jquery链接: https://jquery.com/
所以让它在我的网站 css 中工作我改变了这个
.fa-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
有了这个
.fa-spin:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
只需使用字体Awesome CCS文件以获取更多详细信息http://l-lin.github.io/font-awesome-animation/
他们有关于如何使用 ccs 的详细文档
在字体Awesome 5中,我不小心发现这是由新的SVG库完成的,我实现了我这样做:
.fa-spin-hover:hover svg {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;}
然后它被分配给上级元素并准备好
不隶属于 StackOverflow