在悬停时使多个div交换背景

Question

我有 4 个div，一个更大，另外 3 个同样小。当我将鼠标悬停在其中一个小的上时，我希望大的获得小的具有的背景图像。这在单独的CSS中可能吗？

到目前为止，我有以下内容：

.mar {
    position: relative;
    height: 400px;
    width: 400px;
    background-image: url("http://www.scrapsyard.com/wp-content/uploads/2015/07/Nature.jpeg");
}
#n1 {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-image: url("https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg");
}
#n2 {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-image: url("http://www.hdwallpapers.in/walls/some_are_different-wide.jpg");
}
#n3 {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-image: url("https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg");
}
.mi:hover ~ .mar {
    height: 600px;
}

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

因此，当将鼠标悬停在具有类 mi 的div 上时，我希望带有 mar 的div 的背景图像更改为mi之一。可能吗？

Answer 1

我所要做的就是添加这个 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");
}

并将 .mardiv 放在末尾，如下所示：

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

这是一个小提琴，希望这有帮助，祝你好运！