33

我有一个带有字体真棒图标的锚标签，如下所示

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

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

我的 CSS

.lock:hover{color:red}

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

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

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

谢谢你。

4

6 回答 6

80

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

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";
}
于 2013-10-21T19:25:43.260 回答
7

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

.icon-unlock:hover {
  @extend .icon-lock;
}
于 2014-01-19T18:41:38.337 回答
7

在我的模板中，我经常使用 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;
}
于 2014-04-17T14:29:11.003 回答
3

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

例如下面是锁图标的代码

content: "\f023";

下面是 css 中解锁图标的代码，您可以将其放在 :hover 下

.icon-unlock:before {
  content: "\f09c";
}
于 2013-10-21T19:28:16.447 回答
1

您可以使用纯 CSS：

ul#menu i.fa-envelope:hover:before {content: "\f2b6";}
于 2020-01-07T23:54:43.357 回答
0

在 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 位于此处

于 2013-10-21T19:25:32.230 回答