0

我一直无法找到答案，所以这里是：

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

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

<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 的解决方案？

4

1 回答 1

1

This is sort of possible, but not wonderfully so and, incidentally, I'm using :hover instead of :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.

It works by selecting all the elements to style as opacity: 0 based on the :hover of their shared parent (body in the example code), and then selecting the currently-hovered div to override that styling.

In the demo I've used :hover, but you could, if you wish, use :active, but I'm not sure what you want to achieve with that. Still, it's a proof-of-concept.

于 2013-04-19T16:16:49.563 回答