将鼠标悬停在href标签和图标jquery上

Question

我有一个带有图标和链接的侧面导航栏列表。 当我将鼠标悬停在标签上时，悬停会亮起，但图标不会点亮。 仅当我将鼠标悬停在图标上而不是标签上时，该图标才会亮起。 将鼠标悬停在链接上时，我希望该图标点亮。 我已经使用jQuery在我的图标上添加了一个活动类。 我有一个默认图标（不亮）和一个活动图标（悬停时亮）。 如果我在jQuery中删除i，并且只设置li>a ，则该图标不会点亮。

CSS

    .nav.nav-main {
      background: #293041;
    }
    .nav.nav-main li > a {
      color: #aaccff;
      font-size: 14px;
      font-weight: 300;
      padding: 10px 20px;
    }
    .nav.nav-main li > a i {
      margin-right: 10px;
    }
    .nav.nav-main li > a span {
      padding-top: 3px;
      overflow: hidden;
    }
    .nav.nav-main li > a.active,
    .nav.nav-main li > a:hover {
      background: #374356;
      color: #ffffff;

}

jQuery的

$(".nav.nav-main li>a>i").hover(
  function () {
    $(this).addClass('active');
  }, 
  function () {
    $(this).removeClass('active');
  }
  );

HAML

%ul.nav.nav-main.nav-sidebar
    %li{:role => "presentation"}
      %a{ href: 'javascript:void(0)' }
        %i.pull-left.fu.fu-lg.fu-alumni
        %span.pull-right.badge.badge-warning 1
        Alumni

Answer 1

我建议您使用其他方法。 为什么不使用li:hover而不是jQuery？

.nav.nav-main li:hover > a,
.nav.nav-main li:hover > a > i{
      background: #374356;
      color: #ffffff;
}

Answer 2

CSS方式也可以，但是我要使用此解决方案

$(".nav.nav-main li").hover(
  function () {
    $(this).find('i').addClass('active');
  }, 
  function () {
    $(this).find('i').removeClass('active');
  }
);