悬停在href标签和图标jquery上答案

【问题标题】：Hover on href tag and icon jquery悬停在href标签和图标jquery上
【发布时间】：2015-09-18 07:40:52
【问题描述】：

我有一个带有图标和链接的侧导航栏列表。当我将鼠标悬停在 a 标签上时，悬停会亮起，但图标不会。只有当我直接将鼠标悬停在图标上时，该图标才会亮起，而不是 a 标签。当我将鼠标悬停在链接上时，我希望该图标亮起。我使用 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');
  }
  );

哈姆

%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

【问题讨论】：

制作一个 jsfiddle 来复制您的问题
只需更改您的jquery，例如$(".nav.nav-main li>a").hover

标签： javascript jquery html css haml

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

css 方式也可以，但我会使用这个解决方案

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

【讨论】：