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

Я добавил значки шрифтов в список следующим образом:

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

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

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

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


css hover font-awesome pseudo-class
person Neel    schedule 03.07.2014    source источник
comment
Не могли бы вы создать контейнер в теге a, к которому применены стили :before, а затем выполнить: a:hover element:before?   -  person Luke    schedule 03.07.2014
comment
@ilovecode Нет, в этом случае я не мог, так как мне нужно добавить элемент :before только через css. Ответ Николае Олариу работает для меня.   -  person Neel    schedule 03.07.2014
comment
jsfiddle.net/vlrprbttst/w9SwR   -  person valerio0999    schedule 03.07.2014

Ответы (3)


arrow_upward
15
arrow_downward

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

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

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

person Nicolae Olariu    schedule 03.07.2014
comment
Используется для отображения: встроенный блок; не блокировать в a:before - person Rohit Azad Malik; 03.07.2014
comment
@Nicolae, раньше я добавлял переход css к тегу <a>, когда он не работал. Как только я добавил переход к элементу a:before, поворот сработал. Большое спасибо за ваш ответ. :) - person Neel; 03.07.2014
comment
@RohitAzad Пока :before и :after являются элементами, фактически псевдоэлементами, вы можете заставить их отображаться в виде блока или встроенного блока, как и любой другой элемент (тег). В этом случае display: inline-block, как вы предложили, было бы лучше, потому что он не заставляет тег a опускаться ниже его :before. Поэтому я редактирую свой ответ, чтобы обновить его с помощью inline-block. - person Nicolae Olariu; 03.07.2014
comment
Возможно, мне вообще не нужно упоминать display свойство, не так ли? Потому что у меня это работает даже без набора свойств display. - person Neel; 03.07.2014
comment
@blackops_programmer Чтобы переход CSS работал, вам всегда нужно указать, какие свойства вы хотите анимировать для элемента в его первом (по умолчанию) состоянии, используя transition: propToAnimate|all duration delay easing (конечно, с учетом префиксов браузера :)). Подробнее об переходах CSS. - person Nicolae Olariu; 03.07.2014
comment
Отображение по умолчанию для :before равно inline, поэтому оно работает без добавления display. - person Nicolae Olariu; 03.07.2014
comment
Да.. У меня было transition: all в родительском якорном элементе, и это не сработало. Как только переход был добавлен в :before, все заработало. - person Neel; 03.07.2014

arrow_upward
1
arrow_downward

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

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

}
person aashi    schedule 03.07.2014

arrow_upward
1
arrow_downward

Это работает для меня: http://jsfiddle.net/yZFR2/

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

person Narxx    schedule 03.07.2014