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

Question

我有两个div放在像这样的li元素中：

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

......还有：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消失。