將鼠標懸停在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');
  }
);