Scss родительский селектор, зависание и активный

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 селекторы связаны с литий 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 
    } 
    } 
}