FontAwesome Icons仅在鼠标悬停时旋转？ [英] FontAwesome Icons Spin only on mouseover?

问题描述

在字体很棒我怎样才能使用这段代码：< i class =fa fa-spinner fa-spin>< / i> 鼠标工作只有？

In font awesome how can i use this code : <i class="fa fa-spinner fa-spin"></i> work on mouse over only?

推荐答案

除了覆盖课程外，您还可以创建另一个仅用于悬停：

Instead of overriding the class, you can also just create another one for hover only:

.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 - 的动画：

Note: if using Font-Awesome 4.2+ you may need to namespace the animation with "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;
}

这篇关于FontAwesome Icons仅在鼠标悬停时旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！