Question

我正在尝试熟悉CSS LESS，而我正在尝试使用类div获取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;

    ...
}

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 {}

值得注意的是&引用了parent selector，这意味着选择器.navbar-first:hover正在替换每个&。

CSS LESS - 嵌套的兄弟选择器

1 个答案: