将鼠标悬停在子div上时更改父CSS。通常的解决方案不起作用

Question

当我将鼠标悬停在孩子上方时，我正在尝试更改父div的背景。

在这种情况下，父div的背景将是gif，子级是5个动态添加的海报。

我知道我可以使用纯CSS做到这一点，并尝试了许多不同的解决方案，但是似乎都没有。

父级背景是一个效果很好的gif

    .featured-parent {
       background-image: url("/assets/images/gifs/thisGif.gif"); 
     }

我为儿童海报尝试了以下方法。

首先以~

    #poster1:hover ~ .featured-parent { 
      background-image: url("/assets/images/gifs/newGif.gif");
    }

第二个是+

    #poster1:hover + .featured-parent {
      background-image: url("/assets/images/gifs/newGif.gif");
    }

最后只有一个空格

    #poster1:hover .featured-parent {
      background-image: url("/assets/images/gifs/newGif.gif");
    }

我觉得第一个是正确的解决方案，但是没有用。

这不是重复的问题，因为我正在寻求任何方式来更改父项的样式，同时将其悬停在子项上，而不必通过上升的css选择器