FontAwesome Icons仅在鼠标悬停时旋转？

Posted 2021-04-09

在字体真棒我怎么能使用这个代码：<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;
}

另一答案

你也可以在jquery库中使用javascript：

$('.fa-spinner').hover(function() {
    $(this).addClass('fa-spin');
}, function() {
    $(this).removeClass('fa-spin');
});

这将使它仅在悬停时旋转并在其结束时重置回其原始位置 - 据说它可能看起来与某些图标一样奇怪（我只使用它与cog）。对于悬停时的无限旋转，你可以这样做：

$('.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;
}

另一答案

只需使用font awesome css文件获取更多详细信息qazxsw poi

他们有关于如何使用ccs的详细文档

另一答案

在字体真棒5中，我意外地发现这是由它实现的新svg库完成的，我这样做：

http://l-lin.github.io/font-awesome-animation/

然后它被分配给上级元素并准备就绪