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

时间:2016-02-25 06:15:24

标签: html css

我有这个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>

on customer support and download mobile app mouse over i want to rotate that down arrow as up how can i do it

1 个答案:

答案 0 :(得分:0)

您可以使用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);
}