Можно ли изменить между двумя значками шрифта на панели управления?

У меня есть якорный тег со шрифтом-удивительным значком, следующим образом

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

Можно ли изменить значок на зависание на другой значок?

мой CSS

.lock:hover{color:red}

Помимо значка, краснеющего, я также хотел бы изменить значок на следующий

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

Возможно ли это без помощи JavaScript? Или мне нужен Javascript/Jquery для зависания?

Спасибо.

Ответ 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";
}

Ответ 2

В моих шаблонах я часто использую FontAwesome, и я придумал этот трюк CSS

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

тогда, если мне нужно иметь другой значок при наведении, я просто добавлю оба значка, по умолчанию у него будет также класс ".fa-hover-hidden", другой - ".fa-hover-show",.

Ответ 3

Если вы используете SCSS, вы можете просто сделать это. Гораздо легче, чем любой из решений JS и легче в DOM.

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

Ответ 4

Простой способ открыть файл css шрифта awesome и изменить код значка при наведении...

например, ниже приведен код значка блокировки

content: "\f023";

а ниже приведен код для разблокировки значка в css, который вы можете установить под: hover

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

Ответ 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");
});

Api on.switchClass() находится здесь