Affect DIV, когда другой расчитан

Question

У меня есть два Div, размещенных внутри литий элемента, как это:

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

Div-1 представляет собой заголовок наложение изображения, которое содержит заголовок и отображает на зависании изображения.
Div-2 - это css lightbox с темным фоном, который появляется при нажатии на изображение.

Когда открыта лайтбокс (div-2) (с: цель), div-1 остается видимым за фоном-2. Есть ли решение, которое может скрыть div-1, когда div-2 нацелен?

я пробовал несколько вариантов, но они не работают:

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

... а также: How to affect other elements when a div is hovered

Не удалось настроить скрипку демо, надеюсь, что информация выше помогает.
Любая помощь appriciated :)

Answer 1

Измените порядок div в разметке.

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

и применять

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

теперь, когда div-2 расчитан, div-1 исчезает.