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-来指定我们不希望在Composite和:hover之间留有空格。

回到您的请求，您无法实现所需的功能（将鼠标悬停时修改父级的同级）。不适用于CSS或SCSS。只有使用JavaScript才有可能（因为您可以从JS中的任何位置触发任何内容）。那是因为在CSS中您没有父选择器。您不能再回到从子代到父代的选择链，然后再回到父代的后续同胞。
有关更深入的说明，请参见What do people mean when they say there's no parent selector?。

但是您可以在 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>

SCSS：更改父级的另一个孩子的可见性

1 个答案: