是否可以在悬停时在两个奇特的图标之间进行更改？

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

在我的模板中，我经常使用 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;
}

Answer 3

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

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