从图像列表中更改背景图像

Question

我实际上有这样的结构。

<div class="container">
   <ul>
       <li>
         <img>
       </li>
   </ul>
</div>

主容器始终有背景图像。我想要实现的是当我将鼠标悬停在列表中的图像上时更改容器的背景图像。背景图像应该是列表中的一个。

当鼠标离开时，背景图像应该是原始图像（开头的图像）。

是否可以仅使用css进行操作？还是javascript？

感谢。

Answer 1

使用CSS无法实现。名称中的级联：级联样式表仅支持级联方向的样式，而不支持。

您可以使用Javascript

执行此操作

var myDiv = document.getElementById('foo');

myDiv.onmouseenter = function() { 
    // code to change image here
}

myDiv.onmouseleave = function() { 
    // code to reset to old image here
}