是否可以在懸停時在兩個 fontawesome 圖標之間切換？

Question

我有一個帶有字體真棒圖標的錨標記，如下所示

<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:before {
    content: "\f023";
}

或者，你可以改變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;
}

Answer 4

簡單的方法打開字體真棒的 css 文件並在懸停時更改圖標代碼...

例如下面是鎖圖標的代碼

content: "\f023";

以下是 css 中解鎖圖標的代碼，您可以將其放在 :hover 下

.icon-unlock:before {
  content: "\f09c";
}

Answer 5

在 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 位於此處

Answer 6

您可以使用純 CSS：

ul#menu i.fa-envelope:hover:before {content: "\f2b6";}