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

Question

我有一个带有图标和 link 的侧导航栏列表。当我将鼠标悬停在 a 标签上时，悬停会亮起，但图标不会。只有当我直接将鼠标悬停在图标上时，图标才会亮起，而不是 a 标签。当我将鼠标悬停在 link 上时，我希望图标亮起。我已经使用 jQuery 在我的图标上添加了一个活动的 class。我有一个默认图标（不亮）和一个活动图标（悬停时亮）。如果我删除 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');
  }
  );

哈姆

%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');
  }
);

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

Hover on href tag and icon jquery

javascript

jquery

html

css

haml