SCSS: изменить видимость другого потомка родителя

Question

Как я могу изменить видимость .section, когда наведите li элемент в моем .base классе?

<div class="div1">
    <ul class="base">
        <li>Hello World</li>
    </ul>

    <ul class="section">
        <li>Goodbye World</li>
    </ul>
</div>

Я пытаюсь понять селектор амперсанда, но я невполне понял это.

.div1 {
    > ul.base {
        > li {
            &:hover > & {
                & > .section {
                    visibility: visible;
                }
            }
        }
    }

    > ul.section {
        visibility: hidden;
    }
}

Как я могу это сделать?

Answer 1

& - сокращенное обозначение, означающее «составной селектор в этой точке» .Это означает, что

.div1 {
    > ul.base {
        > li {
            &:hover > & {
              ...

... означает:

|------- & --------|         |------- & --------|   
.div1 > ul.base > li:hover > .div1 > ul.base > li {
  ...

Также обратите внимание, что & фактически неявно большую часть времени.Но на самом деле это не &, который является неявным, а & + (пробел).Вот почему мы используем &:hover - чтобы указать, что мы не хотим пробела между составленным и :hover.

Возвращаясь к вашему запросу, вы не можете достичь того, что вы хотите (изменяя одноуровневый элементродитель, когда ребенок зависНи с CSS, ни с SCSS.Это возможно только с JavaScript (потому что вы можете запускать что угодно из любого места в JS).Это потому, что в CSS у вас нет родительского селектора.Вы не можете вернуться к цепочке выбора от дочернего к родительскому, а затем перейти к последующим родным братьям и родителям.
См. Что люди имеют в виду, когда говорят, что родительского селектора нет? для болееобъяснение глубины.

Но вы можете изменить родителя-родителя, когда parent находится (достаточно близко):

.div {
  ul.base {
    &:hover + ul {
      visibility: hidden;
    }
  }
}

Или еще лучше:

.div1 {
  ul {
    &.section {
      transition: opacity .35s ease-in-out;
    }
    &.base:hover + ul {
      opacity: 0;
    }
  }
}

В результате:

.div1 ul.section {
  transition: opacity .35s ease-in-out; 
}
.div1 ul.base:hover + ul {
  opacity: 0;
}

<div class="div1">
    <ul class="base">
        <li>Hello World</li>
    </ul>
    <ul class="section">
        <li>Goodbye World</li>
    </ul>
</div>