Question

我是Scss的新手，我正试图有一些逻辑，当我将鼠标悬停在一个元素上时，我会看到一个基础栏出现，如果我在导航菜单中选择该元素，则栏保持固定。

我有以下内容，但我似乎没有正确地嵌套主动：

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

我是如何正确使用悬停并激活元素的？你能帮我吗？我对此很困惑。

谢谢，

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
    }
  }
}

Scss父选择器，悬停和活动

1 个答案: