html - 在悬停时制作多个 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 上时, 我想要 div 的背景图像 mar更改为 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");
}

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

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

Here's fiddle ，希望这对您有所帮助，祝您好运!