web-dev-qa-db-fra.com

Est-il possible de changer entre deux superbes icônes de police en survol?

J'ai une balise d'ancrage avec une icône géniale comme suit

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

Est-il possible de changer d'icône au survol d'une icône différente?

mon CSS

.lock:hover{color:red}

Mis à part l'icône qui devient rouge, je voudrais également changer l'icône comme suit

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

Est-ce possible sans l'aide de JavaScript? Ou ai-je besoin de Javascript/Jquery en survol pour cela?

Je vous remercie.

javascripthtmlcssfont-awesome
22
BaconJuice

Vous pouvez basculer celui qui est affiché en survol:

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

Vous pouvez également modifier le content du icon-unlock classe:

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

Si vous utilisez SCSS, vous pouvez simplement le faire. Beaucoup plus léger que toutes les solutions JS et plus léger sur le DOM.

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

Dans mes modèles, j'utilise souvent FontAwesome et j'ai trouvé cette astuce CSS

* > .fa-hover-show,
*:hover > .fa-hover-hidden {
  display: none;
}
*:hover > .fa-hover-show {
  display: inline-block;
}

Ajoutez les deux icônes au HTML; l'icône par défaut doit avoir le fa-hover-hidden classe alors que l'icône de survol devrait avoir 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>

Étant donné que l'icône a un effet de survol, il est probable qu'elle se trouve à l'intérieur d'un bouton ou d'un lien, auquel cas, une solution appropriée serait également de réagir au changement sur: focus également.

* > .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

Manière simple d'ouvrir le fichier CSS de police génial et de changer le code d'icône au survol ...

par exemple ci-dessous est le code de l'icône de verrouillage

content: "\f023";

et voici ci-dessous le code pour l'icône de déverrouillage en CSS que vous pouvez mettre sous: survoler

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

En jquery ce serait juste:

$(document).ready(function () {
        $('.icon-unlock').hover(function () {
            $(this).addClass('icon-lock');
            $(this).removeClass('icon-unlock'); 
        }, function () {
            $(this).addClass('icon-unlock');
            $(this).removeClass('icon-lock');
        });


    });

Voici un fonctionnement jsfiddle de ceci.

Si vous utilisez jquery ui, vous pouvez utiliser .switchClass.

Un exemple de ceci serait:

$(document).ready(function() {
   $(".icon-unlock").switchClass("icon-unlock", "icon-lock");
});

L'API sur .switchClass () se trouve ici

0
Avitus

Vous pouvez utiliser du CSS pur:

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