I am working with a structure that looks like this:
<div class="container">
<ul>
<li>
<img>
</li>
</ul>
</div>
Currently, there is a background image set for the main container. My goal is to change the background image of the container when the mouse hovers over the image in the list. The new background image should be the one from the list item being hovered over.
When the mouse moves away, the background image should revert back to the original one.
Is it possible to achieve this effect using only CSS, or do I need to use JavaScript as well?
Thank you.