1

I am trying to change the background of a parent div when hovering over a child.

In this case the parent div background will be a gif and the children are 5 posters added dynamically.

I know i can do it with pure CSS and have tried many different solutions but none of them seem to work.

The parent background is a gif which works fine

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

I have tried the following for the child posters.

First with ~

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

Second with + 

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

and lastly with just a space

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

I feel like the first one is the correct solution but its not working.

This is not a duplicate question, because i'm asking for any means to change the style of the parent, while hovering over the child, not necessarily by an ascendant css selector

  • This is not a duplicate question –  Mar 22 '19 at 16:37
  • It's not a duplicate question, because the OP is asking for *any* means to change the style of the parent, while hovering over the child, not necessarily by an ascendant css selector. – Jibin Joseph Mar 22 '19 at 16:44
  • Thank you godof23. That was unfair to mark it as a duplicate. I looked everywhere before asking this question. –  Mar 22 '19 at 16:59
  • 1
    You can't do that with CSS. You'll need Javascript for that. – Johannes Mar 23 '19 at 11:33
  • There are no parent selectors in CSS: https://stackoverflow.com/questions/18562835/css-js-solution-on-hover-of-child-element-change-parent-div – A. Meshu Mar 23 '19 at 11:39

0 Answers0