如何让多个div改变一个div的背景图像 [英] How to make multiple divs change the background image of one single div

问题描述

我有一个div作为网站的横幅/标题图片，这张图片最初会显示一张房子的图片。横幅也会有6个div用作按钮，当用户将鼠标悬停在每个div上时，它会将标题的背景图像更改为表示每个页面的不同图像。

这里是我到目前为止的代码：

小提琴

HTML：

 < div ID = navholder > 
 
< div id =nav> 
< a href =index.html>< div id =button1>< div id =triangle>< / div>< div id =buttonname> ;家庭和LT; / DIV>< / DIV>< / A> 
 
< a href =buying.html>< div id =button2>< div id =triangle>< / div>< div id = BUTTONNAME >购买及LT; / DIV>< / DIV>< / A> 
 
< a href =renting.html>< div id =button3>< div id =triangle>< / div>< div id = BUTTONNAME >租赁及LT; / DIV>< / DIV>< / A> 
 
< a href =building.html>< div id =button4>< div id =triangle>< / div>< div id = BUTTONNAME >建筑< / DIV>< / DIV>< / A> 
 
< a href =architecture.html>< div id =button5>< div id =triangle>< / div>< div id = BUTTONNAME >建筑LT; / DIV>< / DIV>< / A> 
 
< a href =landbuying.html>< div id =button6>< div id =triangle>< / div>< div id = buttonname> Land Buying< / div>< / div>< / a> 
< / div> 
 
< / div> 
  

CSS：

  #navholder {
 position：absolute; 
背景：#FFFFFF; 
 width：950px; 
 height：350px; 
 top：150px; 
 margin：0 auto; 
剩下：0; 
 right：0; 
 border：solid 1px＃999; 
 background-image：url（http://placehold.it/950x350）; 
 
} 
 
 #nav {
 width：950px; 
位置：绝对; 
底部：-22px; 
 text-align：center; 
 display：inline-block; 
} 
 
＃button1，＃button2，＃button3，＃button4，＃button5，＃button6 {
 width：130px; 
 height：35px; 
背景颜色：＃879362; 
 margin-left：2px; 
 margin-right：2px; 
 display：inline-block; 
 font-family：Palatino Linotype，Antiqua书，Palatino，serif; 
 line-height：35px; 
 font-weight：bold; 
颜色：#fff; 
} 
 
＃button1：悬停> #triangle，＃button2：悬停> #triangle，＃button3：悬停> #triangle，＃button4：悬停> #triangle，＃button5：悬停> #triangle，＃button6：悬停> #triangle {
 display：block; 
 
 $ b＃button1：悬停，＃button2：悬停，＃button3：悬停，＃button4：悬停，＃button5：悬停，＃button6：悬停{
背景色：＃B7939B; 
} 
 
 #triangle {
 position：relative; 
 width：0; 
 height：0; 
 border-left：15px实体透明; 
 border-right：15px solid transparent; 
 border-bottom：15px solid＃B7939B; 
 top：-15px; 
 left：0px; 
 right：0; 
 margin：0 auto; 
 display：none; 
} 
 
 #buttonname {
 width：130px; 
位置：绝对; 
 top：0px; 
 margin：0 auto; 
} 
  

我试过实现这个例子：from 在CSS悬停事件中，我可以更改其他div的样式吗？

  #a：hover + #b {
 background：#ccc; 
} 
  

但我无法完全理解我的多div的布局。

有没有办法纯粹用CSS来完成它？
如果这是唯一合理的方法，我会使用JS。

解决方案

试试这个

HTML

 < a href =index.html>< div id = button1onmouseover =chbg（'http://placehold.it/300x250'）onmouseout =chbg（'http://placehold.it/950x350'）>< div id =triangle> < / div>< div id =buttonname>主页< / div>< / div>< / a> 
  

脚本

  function chbg（img）{
 document.getElementById（'navholder'）。style.backgroundImage ='url（'+ img +'）'; 
} 
  

DEMO

I have a div as a banner/header image for a website and this image will show a picture of houses on it initially. The banner will also have 6 divs acting as buttons and when the user hovers over each div, it changing the background image of the header to a different image that will represent each page.

Here is the code I have so far:

Fiddle

HTML:

<div id="navholder">

<div id="nav">
<a href="index.html"><div id="button1"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

<a href="buying.html"><div id="button2"><div id="triangle"></div><div id="buttonname">Buying</div></div></a>

<a href="renting.html"><div id="button3"><div id="triangle"></div><div id="buttonname">Renting</div></div></a>

<a href="building.html"><div id="button4"><div id="triangle"></div><div id="buttonname">Building</div></div></a>

<a href="architecture.html"><div id="button5"><div id="triangle"></div><div id="buttonname">Architecture</div></div></a>

<a href="landbuying.html"><div id="button6"><div id="triangle"></div><div id="buttonname">Land Buying</div></div></a>
</div>

</div>

CSS:

#navholder {
    position:absolute;
    background:#FFFFFF;
    width:950px;
    height:350px;
    top:150px;
    margin:0 auto;
    left:0;
    right:0;
    border:solid 1px #999;
    background-image: url(http://placehold.it/950x350);

}

#nav {
    width:950px;
    position:absolute;
    bottom:-22px;
    text-align: center;
    display:inline-block;
}

#button1, #button2, #button3, #button4, #button5, #button6 {
    width:130px;
    height:35px;
    background-color:#879362;
    margin-left:2px;
    margin-right:2px;
    display:inline-block;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    line-height:35px;
    font-weight:bold;
    color:#fff;
}

#button1:hover > #triangle, #button2:hover > #triangle, #button3:hover > #triangle, #button4:hover > #triangle, #button5:hover > #triangle, #button6:hover > #triangle{ 
    display: block;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover{ 
    background-color:#B7939B;
}

#triangle {
    position:relative;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #B7939B;
    top:-15px;
    left:0px;
    right:0;
    margin:0 auto;
    display: none;
}

#buttonname {
    width:130px;
    position:absolute;
    top:0px;
    margin:0 auto;
}

I have tried implementing this example: from On a CSS hover event, can I change another div's styling?

  #a:hover + #b {
        background: #ccc;
    }

But I couldn't quite get it to work with my layout of multiple divs.

Is there a way to do it purely with CSS? I will use JS if that's the only reasonable way.

解决方案

Try this

HTML

<a href="index.html"><div id="button1" onmouseover="chbg('http://placehold.it/300x250')" onmouseout="chbg('http://placehold.it/950x350')"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

Script

function chbg(img) {
    document.getElementById('navholder').style.backgroundImage = 'url('+img+')'; 
}

DEMO

这篇关于如何让多个div改变一个div的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！