javascript - 是否可以在悬停时在两个很棒的图标之间切换？

Question

我有一个带有超赞字体图标的 anchor 标记，如下所示

<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;
}

或者，您可以更改 icon-unlock 类的 content:

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