CSS LESS - 嵌套兄弟选择器

Question

我正在尝试熟悉 CSS LESS，我想让类为“navbar-second”的

在悬停包含类为“navbar-wrapper”的元素上时移动。

我已经使第二个元素能够实现此功能，但对于第一个元素却没有用，因此我一直在尝试一些奇怪的事情，您可以在这里看到：

<div class="navbar-wrapper navbar-first">
    ...
</div>

<div class="navbar-wrapper navbar-second">
    ...
</div>

并且样式：

.navbar-wrapper {
    width: 100vw;
    background: url(../../assets/images/MenuBackground.jpg) no-repeat;
    background-size: cover;
    padding: 0 50px;
    border-bottom: 1px solid white;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    &:hover {
        &.navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }

    ...
}

.navbar-first {
    position: relative;
    z-index: 2;

    &:hover {
        &+&.navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }

    ...
}

.navbar-second {
    position: relative;
    transition: top ease .5s;
    top: -50px;

    ...
}

- Michael Tot Korsgaard

---

只需使用 +，不要使用 &+&。 - isherwood

Answer 1

你需要使用 + .navbar-second 而不是 &+&.navbar-second:

.navbar-first {
    position: relative;
    z-index: 2;

    &:hover {
        + .navbar-second {
            transition: top ease .5s;
            top: 0px;
        }
    }
}

这将会被编译成:

.navbar-first:hover + .navbar-second {}

以前它编译成以下内容：

.navbar-first:hover + .navbar-first:hover.navbar-second {}

值得注意的是，& 引用了父选择器，这意味着选择器 .navbar-first:hover 会被替换为每个 &。

- Josh Crozier