在悬停时让多个div交换背景 [英] Make multiple divs exchange background on hover

问题描述

我有4个div，其中一个更大，其他3个同样小。当我徘徊在其中一个小的那个上面时，我想让那个大个子获得小的那个背景图像。这是可能的在CSS单独？

到目前为止我有以下：

.mar {position：relative; height：400px;宽度：400px; background-image：url（http://www.scrapsyard.com/wp-content/uploads/2015/07/Nature.jpeg）;}＃n1 {display：inline-block; height：100px;宽度：100px; background-image：url（https://i.ytimg.com/vi/uZA6pIrwm-I/maxresdefault.jpg）;}＃n2 {display：inline-block; height：100px;宽度：100px; background-image：url（http://www.hdwallpapers.in/walls/some_are_different-wide.jpg）;}＃n3 {display：inline-block; height：100px;宽度：100px; background-image：url（https://i.ytimg.com/vi/TGLYcYCm2FM/maxresdefault.jpg）;}。mi：hover〜.mar {height：600px;}

 < div class =mar>< / div>< div class = miid =n1>< / div>< div class =miid =n2>< / div>< div class =miid =n3><< ; / div>  

code> mi ，我希望div的背景图像与 mar 改变成英里的。可能吗？

解决方案

所有我必须添加此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 =miid =n1> 
< / div> 
< div class =miid =n2> 
< / div> 
< div class =miid =n3> 
< / div> 
< div class =mar> 
< / div> 
  

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

I have 4 divs, one is bigger, other 3 are equally small. When I hover on one of the small ones, I want the big one to get the background-image that the small one has. Is this possible in CSS alone?

I've got the following so far:

.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>

So when hovering over a div with class mi, I want the background-image of div with mar to change into the one of the mi's. Is it possible?

解决方案

All I had to was add this 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");
}

And place the .mar div at the end like so:

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

Here's a fiddle, hope this helps, good luck!

这篇关于在悬停时让多个div交换背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！