0

I have not been able to find an answer for this, so here goes:

I have 4 divs on the page. When one div is :active, I want all the other divs to adopt opacity:0;

has anyone come up with a way to select all siblings, not just siblings that come after the :active element?

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

From this example, the .c1 div will never disappear. What is a solution that uses only CSS?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rob R
  • 1,011
  • 8
  • 10
  • You could just select siblings that come **after a given element**. At least using just CSS. Do you really mean `:active` state and not `:hover`? – pzin Apr 19 '13 at 15:59
  • try something like `.c2:active ~.circle:nth-child(n)` – Morpheus Apr 19 '13 at 16:00
  • @Morpheus: `:nth-child(n)` is effectively useless here in that it won't change which elements match (and which don't). – BoltClock Apr 20 '13 at 08:21

1 Answers1

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.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Thanks David. This might work. I will just create a parent element for the circles and use the :hover on that instead of the body. – Rob R Apr 19 '13 at 17:36
  • This will probably not work with `:active` due to issues with IE (see for example [this question](http://stackoverflow.com/questions/10753215/clicking-a-child-doesnt-trigger-the-parents-active-state-in-ie) which has other links in the comments). Basically, `body:active .circle:active` will not work in IE, as the parent is not considered active when the child is active. – ScottS Apr 19 '13 at 17:50
  • Thanks Scott. I really needed :hover instead. I've seen that :active IE bug before, and recently even. Thanks again. – Rob R Apr 22 '13 at 19:51