旋轉並保持當前位置

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