Les icônes de fontawesome Spin uniquement sur la sourisovie?

Question

à la police géniale Comment puis-je utiliser ce code: <i class="fa fa-spinner fa-spin"></i> Travail sur la souris sur seulement?

Answer 1

au lieu de remplacer la classe, vous pouvez également en créer un autre pour planer uniquement:

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

Fiddle:

.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

Vous pouvez également utiliser JavaScript avec la bibliothèque JQuery:

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

Cela ne ferait que tourner uniquement sur la survolte et réinitialisera à sa position d'origine lorsque sa sur - qui étant dit, il peut sembler étrange avec certaines des icônes (je ne l'ai utilisée que avec le cog).Pour la filature infinie sur le vol stationnaire, vous pourriez juste faire cela:

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

jQuery link: https://jquery.com/

Answer 3

Alors, faites-le fonctionner dans mon site CSS je change ceci

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

avec cette

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

Answer 4

Utilisez simplement le fichier CCS génial génial pour plus de détails http://l-lin.github.io/font-awesome-animation/

Ils ont une documentation détaillée sur la manière d'utiliser le CCS

Answer 5

à la police génial 5, j'ai accidentellement découvert que cela se fait par les nouvelles bibliothèques SVG que cela implémente Je fais cela:

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

alors il est attribué à l'élément supérieur et prêt