时间戳

首页 > 解决方案 > 将鼠标悬停在菜单项上以突出显示 subnav 的背景

css - 将鼠标悬停在菜单项上以突出显示 subnav 的背景

问题描述

我正在努力做到这一点，所以当您将鼠标悬停在标题导航“呼叫|聊天|更多”中的一个类别上时，下面的子导航会显示，并且与标题导航关联的 ul 会更改其背景颜色，我知道我可以使用 jQuery 添加一个类，但我不能用兄弟选择器或其他东西来做到这一点吗？我只是认为我的 HTML 目前的布局不正确，以便 TIA 工作。这就是我目前拥有的。

<header class="header">
    <ul class="header__nav">
        <li class="header__navItem header__navItem--calls">Calls</li>
        <li class="header__navItem header__navItem--chats">Chats</li>
        <li class="header__navItem header__navItem--more">More</li>
    </ul>

    <nav class="navigation">
        <div class="navigation__wrapper cf">
            <ul class="navItems navItems--calls">
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <li class="navItems__item"></li>
                <div class="bgHover"></div>
            </ul>
        </div>
    </nav>
</header>



.header {
  height: 5.8rem;
  background: rgba(25, 25, 25, 0.9);
  position: absolute;
  width: 100%;
  z-index: 999;

  &__nav {
    display: inline-block;
    text-align: center;
    font-size: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
  }

  &__navItem {
    color: $white;
    display: inline-block;
    @include font-size(18);
    padding: 0 4rem;
    line-height: 5.8rem;
    letter-spacing: 0.1rem;
    position: relative;
    cursor: default;
    font-weight: 400;
    text-transform: uppercase;
    font-family: $lato;

    &--calls {
      &:hover ~ .navigation__wrapper .navItems .bgHover {
        max-height: 35rem;
      }
      &:hover {
        color: red;
      }
    }
  }

标签： csssass

解决方案

我假设您希望子菜单出现在标题导航下方。如果是这样，则将您的子导航移动到相应标题项的 li 标记中，如下所示：

 <li class="header__navItem header__navItem--calls">Calls
  <ul class="navItems navItems--calls">
            <li class="navItems__item">First</li>
            <li class="navItems__item">Second</li>
            <li class="navItems__item">Third</li>
            <li class="navItems__item">Fourth</li>
        </ul>
  </li>

推荐阅读