html - 我的代码中的悬停不起作用，我正在使用 sass

Question

我正在使用 sass 创建导航栏，但悬停在我的导航栏中不起作用我尝试将鼠标悬停在它工作的徽标上问题仅在导航栏上我尝试不使用 &>*:hover 但它仍然无法正常工作。

萨斯：

.user-nav{
  background-color: greenyellow;
  display: flex;
  align-items: center;
  align-self: stretch;

  & > * {
    padding: 0 2rem;
    cursor: pointer;
    height: 100%;
  }

  & > *:hover{ 
    background-color: green;
  }
}

HTML：

<nav class="user-nav">
  <div class="user-nav__icon-box">
    <svg class="user-nav__icon">
      <use xlink:href="img/sprite.svg#icon-bookmark"></use>
    </svg>
    <span class="user-nav__notification">7</span>
  </div>
  <div class="user-nav__icon-box">
    <svg class="user-nav__icon">
      <use xlink:href="img/sprite.svg#icon-chat"></use>
    </svg>
    <span class="user-nav__notification">13</span>
  </div>
  <div class="user-nav__user">
    <img src="img/user.jpg" alt="User photo" class="user-nav__user-photo">
    <span class="user-nav__user-name">Jonas</span>
  </div>
</nav>

标签： htmlsass

Answer 1

你的 scss 不正确。请看看我的：

我的片段

如您所见，您必须添加一些user-nav内容才能使其悬停，并且您必须先隐藏user-nav__notifications，然后在悬停时显示它。