Javascript 是否可以在悬停时的两个图标之间切换？

我有一个锚标签，上面有一个字体很棒的图标，如下所示

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

除了图标变成红色外，我还想将图标更改为以下内容

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

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

---

谢谢。

在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');
        });


    });

这里是一个工作的这个

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

这方面的一个例子是：

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

---

.switchClass（）上的api位于

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

HTML: 或者，您可以更改

图标解锁

类的

内容

：

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

---

简单的方法打开css文件的字体真棒和改变图标代码的悬停

例如，下面是锁定图标的代码

content: "\f023";

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

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

---

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

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

---

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

*>.fa悬停显示，
*：hover>.fa悬停隐藏{
显示：无；
}
*：hover>.fa悬停显示{
显示：内联块；
}

在HTML中添加两个图标；默认图标应该有

fa hover hidden

类，而悬停图标应该有

fa hover show

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

*>.fa悬停显示，
*：hover>.fa悬停隐藏，
*：focus>.fa悬停隐藏{
显示：无；
}
*：focus>.fa悬停显示，
*：hover>.fa悬停显示{
显示：内联块；
}

您可以使用纯CSS：

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

---

您使用的是jquery还是纯javascript？嗨@Avitus，我已经启动了jquery。CSS无法更改页面内容。您需要使用JavaScript。@Diodeus，fontawesome图标位于CSS生成的内容中。JavaScript不是必需的。谢谢。今天学到了新东西；）忠告-不要使用第一种方法。例如，如果您在表格列表上使用它来更改悬停时的删除图标，当您扫描图标时，您会很快注意到“弹出”效果。如果第二种方法完全可以在CSS中完成，那么就不需要在标记中添加所有额外的图标。第二种方法适用于我的文件夹关闭和打开，简单而干净。向ZZBOV致敬@卡皮坦你到底是怎么做到的？我还希望有一个关闭的信封，当鼠标悬停在以下位置时，它会打开：CSS:

.fa信封打开：在{content:“\f2b6”}

HTML:

它只是不起作用：/？就像我要找的一样。谢谢此外，鉴于图标具有悬停效果，它可能位于按钮或链接内，在这种情况下，适当的解决方案是也对

：focus

上的更改作出反应。

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

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

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