Scss 父选择器，悬停和活动

Question

我对 Scss 很陌生，我试图有一些逻辑，当我将鼠标悬停在 a 元素上时，我会出现一个底层栏，如果我在导航菜单中选择该元素，则栏保持固定。

我有以下内容，但我似乎没有正确嵌套活动操作：

nav {
  max-width:100%;
  background:  lightblue;
  ul{
    background: yellow;
    li {
      background: yellow;
      text-align: center;
      a {
        color: red;
        display: inline-block;
      }
        &:hover { background: linear-gradient(to top, green 4px, transparent 0); }
        &:active { background: linear-gradient(to top, green 4px, transparent 0); }
    }
  }
}

这就是我在 a 元素上正确使用悬停和活动的方式吗？你能帮我吗？我对此相当困惑。

谢谢，

P。

Answer 1

您的:hover和:active选择器与 li 相关element。你应该把这些规则放在a部分。

nav {
  max-width:100%;
  background: lightblue;

  ul{
    background: yellow;

    li {
      background: yellow;
      text-align: center;

      a { // <a> starts here
        color: red;
        display: inline-block;

        &:hover { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }

        &:active { 
          background: linear-gradient(to top, green 4px, transparent 0); 
        }
      } // and ends here
    }
  }
}