Значки FontAwesome вращаются только при наведении мыши?

в font awesome как я могу использовать этот код:<i class="fa fa-spinner fa-spin"></i> работать только с мышью?

9
font-awesome icons

4 ответов

вместо переопределения класса вы также можете просто создать другой для наведения только:

.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/

Примечание: при использовании шрифта-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;
}
21

вы также можете использовать javascript с библиотекой jquery:

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

Это заставит его только вращаться при наведении и сбросить обратно в исходное положение, когда он закончится-это, как говорится, может выглядеть странно с некоторыми значками (я использовал его только с винтиком). Для бесконечного вращения на hover вы можете просто сделать это:

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

jQuery ссылка:https://jquery.com/

2

Так что заставьте его работать на моем сайте 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;
}
0

просто используйте шрифт awesome ccs file более подробный http://l-lin.github.io/font-awesome-animation/

у них есть подробная документация о том, как использовать ccs

0