web-dev-qa-db-ja.com

ホバーで2つのフォントの素晴らしいアイコンを変更することはできますか？

次のように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が必要ですか？

ありがとうございました。

javascripthtmlcssfont-awesome
22
BaconJuice

ホバーに表示されるものを切り替えることができます。

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";
}
55
zzzzBov

SCSSを使用している場合は、これを簡単に実行できます。どのJSソリューションよりもはるかに軽量で、DOMが軽量です。

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

私のテンプレートでは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;
}
5
Anas Bouhtouch

素晴しいフォントのCSSファイルを開き、ホバーのアイコンコードを変更する簡単な方法...

たとえば、以下はロックアイコンのコードです。

content: "\f023";

そして以下はCSSのロック解除アイコンのコードで、：hoverの下に置くことができます

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

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は here にあります

0
Avitus

純粋なCSSを使用できます。

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