是否可以在悬停时在两个fontawesome图标之间切换？ [英] Is it possible to change between two fontawesome icons on hover?

问题描述

我有一个锚定标签，其中包含如下的字体真棒图标

I have an anchor tag with a font-awesome icon as follows

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

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

Is it possible to change to icon on hover to a different icon?

我的CSS

.lock:hover{color:red}

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

Aside from the icon turning red I'd also like to change the icon to the following

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

没有JavaScript的帮助，这是可能的吗？

Is this possible without the help of JavaScript? Or do I need Javascript/Jquery on hover for this?

谢谢。

推荐答案

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

You could just toggle which one's shown on hover:

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

_CSS：

_CSS:

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

或者，您可以简单地更改 icon-unlock 类：

Or, you could simply change the content of the icon-unlock class:

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

这篇关于是否可以在悬停时在两个fontawesome图标之间切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！