当另一个目标被攻击时影响div

Question

我有两个div放在如下li元素中：

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

Div-1是图像的标题覆盖，包含标题并显示在图像悬停上.

Div-2是一个背景暗的css灯箱，当点击图像时会弹出窗口.

当打开lightbox ( div-2 )时(目标)，div-1在div-2背景后仍然可见.当div-2被锁定时，是否有可以隐藏div-1的解决方案？

我试过几种不同的方法，但它们不起作用：

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还：How to affect other elements when a div is hovered

无法设置小提琴演示，希望上面的信息有帮助。

任何见习的协助:)

Answer 1

更改标记中div的顺序。

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

并申请

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

现在，当div-2成为目标时，div-1就消失了。