Как повернуть: перед псевдоэлементом при наведении курсора родительского элемента

#css #hover #font-awesome #pseudo-class

#css #наведите #шрифт-потрясающий #псевдокласс

Вопрос:

Я добавил значки шрифтов в список, подобный этому:

 a:before {
    font-family: FontAwesome;
    content: "f015";
    .. etc..
}

При наведении курсора на родительский тег привязки я хочу, чтобы это:перед псевдо было повернуто. Я пробовал это, но это не работает:

 a:hover:before {
            -webkit-transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -o-transform:rotate(360deg);
}

Разве это не работает? Что я могу сделать, чтобы получить эффект поворота для элемента:before только при наведении курсора родительского элемента?

1. Не могли бы вы создать контейнер в a теге, к которому были бы применены :before стили, а затем выполнить: a:hover element:before ?

2. @ilovecode Нет, я не мог в этом случае, так как я должен добавить :before элемент только через css. Ответ Николае Олариу работает для меня..

3. jsfiddle.net/vlrprbttst/w9SwR

Ответ №1:

Попробуйте это:

 a:before {
    -webkit-transition: all 300ms 0s ease-in-out;
    transition: all 300ms 0s ease-in-out;

    content: "f015";
    display: inline-block; //as @Rohit Azad suggested
    font-family: FontAwesome;

    // .. etc ..
}

a:hover:before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

Взгляните на эту скрипку.

1. Используется для отображения:встроенного блока; не блокируется в a:before

2. @Nicolae, Ранее я добавлял css-переход к <a> тегу, когда он не работал. Как только я добавил переход к a:before элементу, поворот сработал. Большое вам спасибо за ваш ответ. 🙂

3. @RohitAzad Поскольку :before и :after являются элементами, по сути, псевдоэлементами, вы могли бы заставить их отображаться в виде блока или встроенного блока, как и любой другой элемент (тег). В этом случае a display: inline-block , как вы предложили, было бы лучше, потому что это не приводит к падению тега a ниже его :before . Итак, я редактирую свой ответ, чтобы обновить с помощью inline-block .

4. @blackops_programmer Для того, чтобы CSS-переход сработал, вам всегда нужно указывать, какие свойства вы хотите анимировать в элементе в его первом (по умолчанию) состоянии, используя transition: propToAnimate|all duration delay easing (конечно, принимая во внимание префиксы браузера :)). Подробнее о CSS-переходах читайте здесь.

5. Да.. У меня был transition: all родительский элемент привязки, и это не сработало. Как только переход был добавлен в :before , он отлично сработал.

Ответ №2:

попробуйте этот css

 a:hover:before[class*="icon-"] {
     -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    .rotate(360deg);

}

Ответ №3:

У меня это работает:http://jsfiddle.net/yZFR2 /

Попробуйте использовать transform правило без префикса для webkit / mozila / opera. Протестировано в Firefox.