Html 是否可以在悬停时在两个 fontawesome 图标之间切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19502835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change between two fontawesome icons on hover?
提问by BaconJuice
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?
是否可以在悬停时更改为其他图标的图标？
my CSS
我的 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>
Is this possible without the help of JavaScript? Or do I need Javascript/Jquery on hover for this?
如果没有 JavaScript 的帮助，这可能吗？或者我需要在悬停时使用 Javascript/Jquery 吗？
Thank you.
谢谢你。
回答by zzzzBov
You could toggle which one's shown on hover:
您可以在悬停时切换显示哪个：
HTML:HTML：<a href="#" class="lock">
<i class="icon-unlock"></i>
<i class="icon-lock"></i>
</a>
.lock:hover .icon-unlock,
.lock .icon-lock {
display: none;
}
.lock:hover .icon-lock {
display: inline;
}
Or, you could change the contentof the icon-unlockclass:
或者，你可以改变content的的icon-unlock类：
.lock:hover .icon-unlock:before {
content: "\f023";
}
回答by Aakash Goel
If you are using SCSS, you could simply do this. Much lightweight than any of the JS solutions and lighter on the DOM.
如果您使用的是 SCSS，则可以简单地执行此操作。比任何 JS 解决方案都轻得多，而且在 DOM 上也更轻。
.icon-unlock:hover {
@extend .icon-lock;
}
回答by Anas Bouhtouch
In my templates I often use FontAwesome and I came up with this CSS trick
在我的模板中，我经常使用 FontAwesome 并且我想出了这个 CSS 技巧
* > .fa-hover-show,
*:hover > .fa-hover-hidden {
display: none;
}
*:hover > .fa-hover-show {
display: inline-block;
}
Add both icons to the HTML; the default icon should have the fa-hover-hiddenclass while the hover icon one should have fa-hover-show.
将这两个图标添加到 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>
Given that the icon has a hover effect, it is likely that it is inside a button or link, in which case, a proper solution would be to also react to the change on :focus as well.
鉴于图标具有悬停效果，它很可能位于按钮或链接内，在这种情况下，正确的解决方案是也对 :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;
}
回答by Minder Saini
Simple way open css file of font awesome and change icon code on hover...
简单的方法打开字体真棒的 css 文件并在悬停时更改图标代码...
for example below is the code for lock icon
例如下面是锁图标的代码
content: "\f023";
and here below is the code for unlock icon in css which you can put under :hover
以下是 css 中解锁图标的代码，您可以将其放在 :hover 下
.icon-unlock:before {
content: "\f09c";
}
回答by Avitus
In jquery it would just be:
在 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');
});
});
Here is a working jsfiddleof this.
这是一个有效的jsfiddle。
If you are using jquery ui then you can use .switchClass.
如果您使用的是 jquery ui，那么您可以使用 .switchClass。
An example of this would be:
这方面的一个例子是：
$(document).ready(function() {
$(".icon-unlock").switchClass("icon-unlock", "icon-lock");
});
The api on .switchClass() is located here
.switchClass() 上的 api 位于此处
回答by Diana
You can use pure CSS:
您可以使用纯 CSS：
ul#menu i.fa-envelope:hover:before {content: "\f2b6";}
