Question

我有4个div，一个更大，另外三个同样小。当我将鼠标悬停在其中一个小图片上时，我希望大图片能够获得小图片背景图片。这在CSS中是否可行？

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

document.querySelector('.popup');

.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>的div上时，我希望将带有mi的div的背景图像更改为mar的一个。可能吗？

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小提琴，希望这会有所帮助，祝你好运！

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

1 个答案: