旋转并保持当前位置

Question

我想要的确切功能与图标显示here菜单

到目前为止，我有：

1. 导航栏到位
2. 的Fontawesome图标（fa-angle-down）
3. 只有当鼠标悬停在图标上时，图标才会旋转，而当鼠标悬停在菜单项的“li”上时，我希望它可以旋转。另外，当鼠标移动到下拉列表项目时，旋转图标应保持原样。

到目前为止的代码：JSFiddle

$("li.dropdown > a > i").hover(
    function() { 
     $(this).addClass("gxcpl-fa-rotate-45"); 
    }, 
    function() { 
     $(this).removeClass("gxcpl-fa-rotate-45"); 
    } 
); 

Answer 1

您只定位图标：

$("li.dropdown > a > i").hover(

您需要针对<li>，然后将类应用到其子<i>：

$("li.dropdown").hover(
    function() { 
    $(this).find("i").addClass("gxcpl-fa-rotate-45"); 
    }, 
    function() { 
    $(this).find("i").removeClass("gxcpl-fa-rotate-45"); 
    } 
); 

查看小提琴here