SCSS Mutter Wähler, schweben und aktiv

Question

Ich bin sehr neu zu SCSS und ich versuche, eine gewisse Logik zu haben, wodurch dann, wenn ich auf dem ein Element schweben ich eine darunter liegende Bar erhalten zu erscheinen, und wenn ich wählen Sie dieses Element im nav-Menü die Bar bleibt fixiert.

Ich habe folgendes, aber ich scheine nicht richtig Nest, um die aktive Aktion:

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

Ist das, wie ich richtig schweben und aktiv auf dem ein Element? Kannst du helfen? Ich bin ziemlich verwirrt darüber.

Danke,

P.

Answer 1

Ihre :hover und :active Selektoren element auf li bezogen. Sie sollten diese Regeln auf a Abschnitt setzen.

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