Html 使多个div在悬停状态下交换背景

我有4个div，一个更大，另外3个同样小。当我将鼠标悬停在其中一个小图标上时，我希望大图标能得到小图标的背景图像。仅在CSS中就可以做到这一点吗

到目前为止，我得到了以下信息：

.mar{
位置：相对位置；
高度：400px；
宽度：400px；
背景图像：url（“http://www.scrapsyard.com/wp-content/uploads/2015/07/Nature.jpeg");
}
#n1{
显示：内联块；
高度：100px；
宽度：100px；
背景图像：url（“https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg");
}
#氮气{
显示：内联块；
高度：100px；
宽度：100px；
背景图像：url（“http://www.hdwallpapers.in/walls/some_are_different-wide.jpg");
}
#n3{
显示：内联块；
高度：100px；
宽度：100px；
背景图像：url（“https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg");
}
.mi:悬停~.mar{
高度：600px；
}

---

我所要做的就是添加这个css

#n1:hover ~ .mar {
   background-image: url("https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg");  
}

#n2:hover ~ .mar {
   background-image: url("http://www.hdwallpapers.in/walls/some_are_different-wide.jpg");
}

#n3:hover ~ .mar {
  background-image: url("https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg");
}

然后将.mar div放在末尾，如下所示：

<div class="mi" id="n1">
</div>
<div class="mi" id="n2">
</div>
<div class="mi" id="n3">
</div>
<div class="mar">
</div>

---

一把小提琴，希望这有帮助，祝你好运

不……按照当前的结构，您需要javascript。是的……将大div放在小div之后。@Melye77如果您将大div放在小div之后，并使用

position

使其首先出现，那么您可以在CSS中使用相邻的和通用的同级选择器来完成您想要的任务。为此，您将需要JS（或一整套CSS）…我指的是您正在使用的CSS选择器。

~

用于后续同级。@Melye77，TylerH指的是CSS不能以父选择器（标记中较高的元素）为目标，而只能以同级选择器（标记中较低的元素）为目标的事实啊，好吧，所以我不能在任何数量的div上工作，而不写相同的#n1:hover~.mar{background image:url（“）；”}反复编写代码？不，我不这么认为，不使用css，但我确信在jQuery中，你可以获得你悬停的div的图像，并将其作为大div的背景图像，但不使用css。再想一想，你有没有想过使用预处理器？@SamirChahine即使使用预处理器，它仍然会编译为相同的css。哦，它会当然，如果OP想继续使用CSS，那么Sass或类似的预处理器就更好了，他们可以创建一个包含所有图像源的数组并循环使用它们，但是是的，jQuery是解决这个问题的正确语言。