旋轉並按住Font Awesome圖標的位置

Question

我想確切的函數，如在這里與圖標菜單

到目前為止，我有：

1. 導航欄到位
2. Fontawesome圖標（向下傾斜）
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");
  }
);

在這里查看小提琴