FontAwesome图标只在鼠标悬停时旋转？

Question

FontAwesome图标只在鼠标悬停时旋转？

iconsfont-awesome

13

在font awesome中，如何仅在鼠标悬停时使用此代码：<i class="fa fa-spinner fa-spin"></i>？

- Vachos

5个回答

6

您也可以使用jQuery库的JavaScript：

$('.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/

- Nesiehr

我一直在想，为什么没有人建议更改类（class）直到我看到了你的答案。这是一个干净的jQuery方法，没有CSS源码修改。 - Ahmad Maleki

0

在 Font Awesome 5 中，我意外地发现它是通过实现新的 SVG 库来实现的。我做了这个：

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

然后它被分配给上级元素并准备就绪

- Dariem Lázaro García López

0

所以让它在我的网站中工作，我更改了这个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;
}

- Vachos

必须更改。 - Xm7X

0

只需使用 Font Awesome 的 CSS 文件。有关更多详细信息，请参见http://l-lin.github.io/font-awesome-animation/。

他们有关于如何使用 CSS 的详细文档。

- m. oscar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Owens · Accepted Answer

与其覆盖类，你也可以仅为鼠标悬停创建另一个类：

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

注意：如果使用 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;
}