CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
GXCPL.Official
GXCPL.Official

Reputation: 279

Rotate and Hold Postion of Font Awesome Icon

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");
    }
);

Upvotes: 0

Views: 250

Answers (1)

sn3ll
sn3ll

Reputation: 1685

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

Upvotes: 2

Related Questions