Синтаксис SASS, псевдоэлемент :hover + class?

Question

[Pavel Beloborodov]

Я не понимаю почему не работает комбинация
& a
&:hover + .increase
я пытаюсь изменить значение display: none у блока с классом increase.
однако почему то когда я добавляю "+.increase" перестает работать и hover.
что не так?


Цель всего действия при наведении на блок с изображением, накладывать на другой цвет с крестиком....

Answer 1

[ⓒⓢⓢ]

попробуйте убрать знак "&" перед тегом "a" (28 строка)
и "наверно" на 32 строке тоже лишний знак амперсанда
upd
блок .increase находиться "внутри" тега "a", значит селектор соседей не подойдёт (селектор "+") - его надо удалить
&:hover .increase

Comments

[Pavel Beloborodov]

Так ведь с помощью этих амперсандов я указываю компилятору что сделать с тегами в этом блоке/секции

[Pavel Beloborodov]

Правильное решение убрать "+". Спасибо большое. Часа 4 потратил на это.

[Сергей delphinpro]

bekingem, Лишние амперсанды только засоряют код. Подстановка родительского селектора в любом случае будет. Амперсанд лишь указывает, куда его нужно подставить, если нужно изменить позицию:

.selector {
  & a {
  }
}

равнозначно такому коду

.selector {
  a {
  }
}

Второе чище, и проще читается.

Но если нам нужно получить на выходе, например, a .selector {}
то мы может использовать амперсанд, чтобы указать это

.selector {
  a & {
  }
}