从图像列表中更改背景图像[重复]

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
}