Rotate and Hold Postion of Font Awesome Icon

Question

I want the exact function as shown here in the menu with the icon

So far I have:

1. The Navbar in place
2. The Fontawesome Icon (fa-angle-down) in place
3. The Icon rotates but only when the mouse is over the icon, while i want it to be able to rotate when the mouse over is on the "li" of the menu item. Also, when the mouse is taken to the dropdown list item, the rotate icon should remain as is.

Code so far: JSFiddle

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

Answer 1

You're only targeting the icon:

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

You need to target the <li> and then apply the class to its child <i> :

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

Check out the fiddle here