[英]Is possible to toggle between 2 FontAwesome 5 icons (regular and solid) using jQuery
[英]Is it possible to change between two fontawesome icons on hover?
我有一个带有字体真棒图标的锚标记,如下所示
<a href="#" class="lock"><i class="icon-unlock"></i></a>
是否可以在悬停时更改为其他图标的图标?
我的 CSS
.lock:hover{color:red}
除了图标变红,我还想将图标更改为以下内容
<i class="icon-lock"></i>
如果没有 JavaScript 的帮助,这可能吗? 或者我需要在悬停时使用 Javascript/Jquery 吗?
谢谢。
您可以在悬停时切换显示哪个:
HTML: <a href="#" class="lock"> <i class="icon-unlock"></i> <i class="icon-lock"></i> </a>
CSS:
.lock:hover .icon-unlock:before {
content: "\f023";
}
或者,你可以改变content
的的icon-unlock
类:
.lock:hover .icon-unlock:before { content: "\\f023"; }
在我的模板中,我经常使用 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;
}
如果您使用的是 SCSS,则可以简单地执行此操作。 比任何 JS 解决方案都轻得多,而且在 DOM 上也更轻。
.icon-unlock:hover {
@extend .icon-lock;
}
简单的方法打开字体真棒的 css 文件并在悬停时更改图标代码...
例如下面是锁图标的代码
content: "\f023";
以下是 css 中解锁图标的代码,您可以将其放在 :hover 下
.icon-unlock:before {
content: "\f09c";
}
在 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 位于此处
您可以使用纯 CSS:
ul#menu i.fa-envelope:hover:before {content: "\f2b6";}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.