旋转并按住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");
  }
);

在这里查看小提琴