FontAwesome Icons Spin only on mouseover?

问题

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

回答1:

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>

Fiddle: http://jsfiddle.net/Xw7LH/1/

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

回答2:

You could also use javascript with the jquery library:

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

That would make it only spin on hover and reset back to its original position when its over - that being said it can look weird with some of the icons (I've only used it with the cog). For infinite spinning on hover you could just do this:

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

jquery link: https://jquery.com/

回答3:

so make it work in my site css i change this

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

with this

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

回答4:

just use font awesome ccs file for more details http://l-lin.github.io/font-awesome-animation/

they have detailed documentation on how to use the ccs

回答5:

in font awesome 5, I accidentally discovered that this is done by the new svg libraries that it implements I do this:

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

then it is assigned to the superior element and ready

来源：https://stackoverflow.com/questions/21030259/fontawesome-icons-spin-only-on-mouseover

标签

icons

font-awesome