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

Question

我有一个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">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;
}

我尝试实现这个例子：来自在CSS hover事件中，我可以改变另一个div的样式吗？。

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

但我无法将其与我的多个div布局完全配合使用。

有没有一种纯CSS的方法可以做到这一点？ 如果这是唯一合理的方法，我会使用JS。

- man

Answer 1

编辑：稍微更新了一下CSS。这只是一个小小的练习，但还是忘了加focus。已修复。

---

一个可能的方法是像这样。不过，当涉及到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;
}

- Runium

Answer 2

尝试一下

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>

脚本

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

DEMO

的英译中文为：

{{链接1：演示}}

。

- Sridhar R

Answer 3

看看这个：

http://jsfiddle.net/8C4TT/

$(".buy").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});

$(".rent").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});

- Anup

---

OP 要求使用纯 JS，不要用 JQuery。 - Sridhar R

抱歉，我匆忙之中。 - Anup

没关系，我也会用 jQuery :) 谢谢，我会去查看的。 - man

Answer 4

这不是纯粹的JavaScript或CSS，它使用jQuery来完成。如果有帮助的话，这只是解决此问题的一种方法 :)

HTML：

<div id="navholder">
    <div id="nav">
<a href="index.html" data-img="http://placehold.it/950x350/FFFFFF">
    <div id="button1">
        <div id="triangle"></div>
        <div id="buttonname">Home</div>
    </div>
 </a>

<a href="buying.html" data-img="http://placehold.it/950x350/0000FF"><div id="button2"><div id="triangle"></div><div id="buttonname">Buying</div></div></a>

...
</div>

JavaScript

$(function () {
    var $navholder = $("#navholder");
    $navholder.on("mouseenter mouseleave", "a", function (event) {        
        if (event.type === "mouseenter") {                
            $navholder.css("background-image", "url('" + $(this).data("img") + "')");
        } else {
            $navholder.css("background-image", "url('http://placehold.it/950x350')");
        }
    });
});

- Esko

Answer 5

你提供的例子行不通，因为+选择器只能选择紧邻目标选择器的兄弟元素(http://www.w3.org/TR/css3-selectors/#selectors)。 #navholder是父元素，我相信仅通过CSS无法选择一个元素的父元素。

你可以改变结构，使#navholder在#nav内部，并使用~通过任何兄弟元素选择它，或者使用JS解决方案。

- RogerH