Question

我有一个带有font-awesome图标的锚标记，如下所示

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

是否可以在悬停到其他图标时更改为图标？

我的CSS

.lock:hover{color:red}

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

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

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

谢谢。

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

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

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

Answer 2

如果您使用的是SCSS，则只需执行此操作即可。比任何JS解决方案都要轻量级，并且在DOM上更轻巧。

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

Answer 3

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

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

然后如果我需要在悬停时有一个不同的图标我只添加两个图标，默认的图标也会有“.fa-hover-hidden”类，另一个将有“.fa-hover-show”

Answer 4

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

例如下面是锁定图标

的代码

content: "\f023";

以下是css中解锁图标的代码，您可以将其置于：hover

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

Answer 5

在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

Answer 6

您可以使用纯CSS：

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

是否可以在悬停时更改两个字体真棒图标？

6 个答案: