更改悬停时没有兄弟或孩子的另一个div

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类。由于.notpro不是btn-1的子级或同级项，因此它不起作用。

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

有没有办法做到这一点？

谢谢！

Answer 1

[没有使用JavaScript来影响其他同级选择器的方法。但是，如果您将悬停向上移动一个级别，则可以这样做。