旋转和保持字型的位置

Question

我想要精确的函数，如菜单中显示的这里和图标

到目前为止，我已经：

1. 海军酒吧就位
2. 方塔人图标(法角向下)就位
3. 图标旋转，但只有当鼠标是在图标之上，而我希望它能够旋转时，鼠标是在菜单项的“李”。另外，当鼠标移到下拉列表项时，旋转图标应该保持原样。

目前为止的代码：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");
  }
);

看看小提琴这里