css - 如何在事件元素之前和之后选择某个类的所有兄弟选择器？

Question

我没能找到这个问题的答案，所以这里是:

我在页面上有 4 个 div。当一个 div 为 :active 时，我希望所有其他 div 都采用 opacity:0;

有没有人想出一种方法来选择所有 sibling ，而不仅仅是 :active 元素之后的 sibling ？

<div class="circle c1"> </div>
<div class="circle c2"> </div>
<div class="circle c3"> </div>
<div class="circle c4"> </div>

<style type="text/css">

    .c2:active ~.circle {
        opacity: 0;
    }
</style>

在这个例子中，.c1 div 永远不会消失。什么是仅使用 CSS 的解决方案？

Answer 1

这有点可能，但不是很好，顺便说一下，我使用的是 :hover 而不是 :active:

.circle {
    opacity: 1;
    width: 48%;
    margin: 0;
    display: inline-block;
    border: 1px solid #000;
    height: 10em;
}

body:hover .circle {
    opacity: 0.4; /* obviously adjust to 0, but used 0.4 for the demonstration */
}

body:hover .circle:hover {
    opacity: 1;
}

JS Fiddle demo .

它的工作原理是根据共享父级(body示例代码)，然后选择当前悬停的 div 以覆盖该样式。

在演示中我使用了:hover，但如果你愿意，你可以使用:active，但我不确定你想要实现什么接着就，随即。不过，这只是一个概念验证。