Question

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

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

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

2 个答案: