Affect div when another is targeted

Question

i've got two div's placed inside a li element like this:

<li>
    <img src"..." />
    <div-1></div>
    <div-2></div>
<li>

Div-1 is a caption overlay of an image, which contains caption and displays on image hover.
Div-2 is a css lightbox with dark background, which popups when clicked on a image.

When lightbox (div-2) is opened (with :target), div-1 remains visible behind div-2 background. Is there an solution that can hide div-1 when div-2 is targeted?

i've tried few variations, but they don't work:

li .div-1:target ~ div-2 {display: none}
li > .div-1:target ~ div-2 {display: none}
li > .div-1:target + div-2 {display: none}

...and also: How to affect other elements when a div is hovered

Couldn't setup a fiddle demo, hope that info above helps.
Any help appriciated :)

Answer 1

Change the order of the div's in the markup.

<li>
    <img src"..." />
    <div-2></div>
    <div-1></div>
<li>

and apply

.div-2:target + div-1
{
    display:none;
}

now, when div-2 is targeted, div-1 disappears.