Question

我已将字体图标添加到这样的列表中：

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

当父锚标记悬停时，我想要这样：在伪旋转之前。我尝试了这个，但它不起作用：

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

这不起作用吗？如果仅在父元素悬停时才能在：before元素上获得旋转效果？

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

看看这个fiddle。

Answer 2

试试这个css

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

}

Answer 3

这对我有用： http://jsfiddle.net/yZFR2/

尝试使用不含webkit / mozila / opera前缀的transform规则。在Firefox上测试。

如何旋转：父元素悬停时的伪元素之前

3 个答案: