javascript - 如何让多个div改变一个div的背景图片

Question

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

这是我目前的代码:

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;
}

我已经尝试实现这个例子:来自 On a CSS hover event, can I change another div's styling?

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

但我不能完全让它与我的多个 div 布局一起工作。

有没有办法只用 CSS 来实现？如果这是唯一合理的方式，我会使用 JS。

Answer 1

编辑:稍微更新了 CSS。它只是一个 fiddle ，但是，仍然。忘记添加焦点。固定。

---

一种可能的方法可能是这样的。但是，我对 CSS 很生疏，没有在其他最新的 Firefox 和 Chrome 中测试过它。

没有 JavaScript。

http://jsfiddle.net/Ifnak/ZyX4t/

基本思想是在每个链接后直接使用一个 div，因此您可以使用 + 选择器。

HTML

<div id="banner">banner
    <div id="menu">
        <a id="mm_btn1" href="a.html">Home<span></span></a>
        <div class="h_banner">A</div>
        <a id="mm_btn2" href="b.html">Buying<span></span></a>
        <div class="h_banner">B</div>
        <a id="mm_btn3" href="c.html">Renting<span></span></a>
        <div class="h_banner">C</div>
    </div>
</div>

CSS:

#banner, .h_banner {
    width            : 500px;
    height           : 250px;
    position         : absolute;
    margin           : 0 auto;
    left             : 0;
    right            : 0;
}
#banner {
    top              : 50px;
    border           : 10px solid #942;    
    background-image : url(http://placehold.it/500x250/222/666&text=Welcome);
}
#menu {
    width            : 500px;
    position         : relative;
    top              : 220px;
    margin           : 0 auto;
    text-align       : center;
}

#menu a {
    position         : relative;
    z-index          : 100;
    display          : inline-block;
    padding          : 20px 50px;
    background       : #963;
    width            : 60px;
    text-decoration  : none;
    outline          : none;
    font             : bold 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color            : #aaa;
}
/* Display none, etc. Here opacity is used to combine with transition effect. */
.h_banner {
    opacity          : 0;
    top              : -240px;
    z-index          : 90;
  -webkit-transition : .7s;
          transition : .7s;
}
/* On hover set opacity and background image for div. 
 * Image could be set earlier to force pre-load. 
 *
 * __Important__ to include "focus" so that Tab etc. gives 
 * the same effect as hover. */
#mm_btn1:focus + .h_banner, #mm_btn1:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Home);
}
#mm_btn2:focus + .h_banner, #mm_btn2:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Buying);
}
#mm_btn3:focus + .h_banner, #mm_btn3:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Renting);
}



/* Arrow */
#menu a span {
    display          : none;
}
#menu a:focus span,
#menu a:hover span {
    display          : block;
}
#menu a span:after {
    content          : "";
    position         : absolute;
    width            : 0;
    height           : 0;
    border-width     : 30px;
    border-style     : solid;
    border-color     : transparent transparent rgba(153,102,51,.98) transparent;
    top              : -55px;
    margin           : 0 -30px;
}