CODEWITHSUNDEEP
sasshover
panza
panza

Reputation: 1431

Scss parent selector, hover and active

I am very new to Scss and I am trying to have some logic whereby when I hover on the a element I get an underlying bar to appear and if I select that element in the nav menu the bar stays fixed.

I have the following, but I do not seem to correctly nest the active action: 

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

Is that how I correctly use hover and active on the a element? Can you help? I am rather confused about it.

Thank you,

P.

Upvotes: 5

Views: 40016

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

Your :hover and :active selectors are related to li element. You should put these rules to a section.

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

Upvotes: 19

Related Questions