Родительский селектор Scss, наведение и активация

Я очень новичок в 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); }
    }
  }
}

Правильно ли я использую hover и active для элемента a? Вы можете помочь? Я довольно смущен этим.

Спасибо,

P.


sass hover
person paranza    schedule 12.12.2016    source источник
comment
Выложи свой html тоже   -  person Raviteja    schedule 13.12.2016

Ответы (1)


arrow_upward
9
arrow_downward

Ваши селекторы :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
    }
  }
}
person 3rdthemagical    schedule 13.12.2016
comment
если ваши стили :hover и :active одинаковы, вы можете избежать дублирования, используя &:hover, &:active { ... } - person samzmann; 14.03.2020