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

Question

在字体真棒我怎么能使用这个代码:<i class="fa fa-spinner fa-spin"></i> 只在鼠标上工作？

Answer 1

您也可以只创建另一个用于悬停的类,而不是覆盖该类:

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

Answer 2

您还可以将 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/