html - 当另一个被定位时影响 div

Question

我在这样的 li 元素中放置了两个 div：

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

Div-1 是图像的标题叠加层，其中包含标题并在图像悬停时显示。
Div-2 是一个深色背景的 CSS 灯箱，单击图像时会弹出。

当灯箱 (div-2) 打开时（使用 :target），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}

...还有：当 div 悬停时如何影响其他元素

无法设置小提琴演示，希望以上信息有所帮助。
任何帮助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消失了。