在鼠标上旋转glyphicon glyphicon-menu-down作为glyphicon glyphicon-menu-up

Question

我有这个glyphicon glyphicon-menu-down arrow

客户支持

<a  class="dropdown-toggle" data-toggle="dropdown" id="navLogin" href="#" style="position:relative;right:10px;" > <span class="glyphicon glyphicon-menu-down" id="spn"></span></a>

Answer 1

您可以使用CSS中的transform属性来实现此目的。

<强> CSS

.menu-arrow {

    /* The transition, this will animate the rotation */
    transition: transform 600ms ease;
}

.menu-arrow:hover {

    /* Rotate the element 180deg on hover */
    transform: rotate(180deg);
}

更新 - 现在你发布了一些代码试试这个：

<强> CSS

#spn  {

    /* The transition, this will animate the rotation */
    transition: transform 600ms ease;
}

.dropdown-toggle:hover #spn {

    /* Rotate the element 180deg on hover */
    transform: rotate(180deg);
}