在悬停时更改另一个 div，它既不是兄弟也不是 child

Question

我的 HTML 代码与此类似：

<div class="navbar">
    <div class="btn-section btn-1">
        <p class="section pro">...</p>
    </div>
</div>

<div class="navbar">
    <div class="btn-section btn-2">
        <p class="section notpro">...</p>
    </div>
</div>

我在我的 CSS 代码中使用它：

.btn-1:hover {
    .pro {
        ...
    }
}

效果很好。

我现在要做的是修改 btn-1:hover 中的 .notpro class。由于 .notpro 不是 child 或 btn-1 的同级文件，因此它不起作用。

.btn-1:hover {
    .pro {
        ... // works
    }
    .notpro {
        ... // doesn't work
    }
}

有办法吗？

谢谢！

Answer 1

没有使用 javascript 来影响不同的非兄弟选择器是没有办法的。但是如果你将悬停向上移动一级，你就可以做到。

您需要将鼠标悬停在第一个导航栏上并使用直接同级组合器 (+) - 定位另一个导航栏然后在其中获取 .notpro 元素。请注意，我在您的元素中添加了文字以显示悬停效果。

唯一的其他 CSS 方法是将两个元素都放在一个导航栏中 - 这样它们就成为兄弟姐妹并且可以被定位。

.navbar:hover + .navbar .notpro {
 color: red;
}

<div class="navbar">
    <div class="btn-section btn-1">
        <p class="section pro">I am a Pro</p>
    </div>
</div>

<div class="navbar">
    <div class="btn-section btn-2">
        <p class="section notpro">I am Not a Pro</p>
    </div>
</div>

Answer 2

我认为此语法在 CSS 中无效，意思是选择器在另一个选择器中。

您可以将 :hover 添加到 'pro' 以获得与父 div 不同的行为。

在悬停时更改另一个 div，它既不是兄弟也不是 child

Change another div on hover which is not sibling nor child

html

css

parent-child

hover

siblings