是否可以在悬停时在两个 fontawesome 图标之间进行切换？答案

【问题标题】：Is it possible to change between two fontawesome icons on hover?是否可以在悬停时在两个 fontawesome 图标之间进行切换？
【发布时间】：2013-10-30 10:27:46
【问题描述】：

我有一个带有字体真棒图标的锚标记，如下所示

<a href="#" class="lock"><i class="icon-unlock"></i></a>

是否可以将鼠标悬停时的图标更改为不同的图标？

我的 CSS

.lock:hover{color:red}

除了图标变红我还想把图标改成下面的样子

<i class="icon-lock"></i>

如果没有 JavaScript 的帮助，这可能吗？或者我需要在悬停时使用 Javascript/Jquery 吗？

谢谢。

【问题讨论】：

您使用的是 jquery 还是纯 javascript？
嗨 @Avitus 我已经让 Jquery 运行了。
CSS 无法更改页面内容。您需要使用 JavaScript。
@Diodeus，字体很棒的图标在 CSS 生成的内容中。 JavaScript 不是必需的。

标签： javascript html css font-awesome

【解决方案1】：

您可以切换悬停时显示的内容：

_HTML:

<a href="#" class="lock">
    <i class="icon-unlock"></i>
    <i class="icon-lock"></i>
</a>

_CSS:

.lock:hover .icon-unlock,
.lock .icon-lock {
    display: none;
}
.lock:hover .icon-lock {
    display: inline;
}

或者，您可以更改 icon-unlock 类的 content：

.lock:hover .icon-unlock:before {
    content: "\f023";
}

【讨论】：

谢谢。今天学到了一些新东西；）
忠告——不要使用第一种方法。例如，如果您在表格列表中使用它来更改悬停时的删除图标，当您扫描图标时，您会很快注意到“弹出”效果。当这可以完全在 CSS 中使用第二种方法完成时，不需要用所有这些额外的图标来弄乱你的标记。
第二种方法适用于我的文件夹关闭和打开，简单而干净。向 zzzzBov 致敬！
@kapitan 你是怎么做到的？我还想要一个封闭的信封，当鼠标悬停在上面时会打开：CSS：.fa-envelope-open:before {content: "\f2b6";} HTML：<a href="#"><i class="fa fa-envelope fa-2x"></i><i class="fa fa-envelope-open fa-2x"></i></a> 它只是没用：/

【解决方案2】：

如果您使用的是 SCSS，您可以简单地执行此操作。比任何 JS 解决方案都轻量级，并且在 DOM 上更轻量级。

.icon-unlock:hover {
  @extend .icon-lock;
}

【讨论】：

【解决方案3】：

在我的模板中，我经常使用 FontAwesome，我想出了这个 CSS 技巧

* > .fa-hover-show,
*:hover > .fa-hover-hidden {
  display: none;
}
*:hover > .fa-hover-show {
  display: inline-block;
}

将两个图标添加到 HTML；默认图标应具有fa-hover-hidden 类，而悬停图标应具有fa-hover-show。

<a href="#">
  <i class="fa fa-lock fa-hover-hidden"></i>
  <i class="fa fa-lock-open fa-hover-show"></i>
  <span class="fa-hover-hidden">Locked</span>
  <span class="fa-hover-show">Unlocked</span>
</a>

鉴于图标具有悬停效果，它很可能位于按钮或链接内，在这种情况下，适当的解决方案是也对 :focus 上的更改做出反应。

* > .fa-hover-show,
*:hover > .fa-hover-hidden,
*:focus > .fa-hover-hidden {
  display: none;
}
*:focus > .fa-hover-show,
*:hover > .fa-hover-show {
  display: inline-block;
}

【讨论】：

如果我有一个文本要与图标一起更改，我应该怎么做？喜欢解锁锁定
正是我想要的。谢谢。此外，鉴于图标具有悬停效果，它很可能位于按钮或链接内，在这种情况下，适当的解决方案是也对 :focus 上的更改做出反应。

【解决方案4】：

打开字体真棒的css文件并在悬停时更改图标代码的简单方法......

例如下面是锁图标的代码

content: "\f023";

下面是css中解锁图标的代码，你可以放在:hover下

.icon-unlock:before {
  content: "\f09c";
}

【讨论】：

【解决方案5】：

你可以使用纯 CSS：

ul#menu i.fa-envelope:hover:before {content: "\f2b6";}

【讨论】：

【解决方案6】：

在 jquery 中它只是：

$(document).ready(function () {
        $('.icon-unlock').hover(function () {
            $(this).addClass('icon-lock');
            $(this).removeClass('icon-unlock'); 
        }, function () {
            $(this).addClass('icon-unlock');
            $(this).removeClass('icon-lock');
        });


    });

这是一个有效的jsfiddle。

如果您使用的是 jquery ui，那么您可以使用 .switchClass。

这方面的一个例子是：

$(document).ready(function() {
   $(".icon-unlock").switchClass("icon-unlock", "icon-lock");
});

.switchClass()上的api位于here

【讨论】：