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

【问题标题】：How to make multiple divs change the background image of one single div如何让多个div改变一个div的背景图片
【发布时间】：2014-02-12 05:15:34
【问题描述】：

我有一个 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。

【问题讨论】：

标签： javascript css html

【解决方案1】：

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

一种可能的方法可能是这样的。但是，我对 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;
}

【讨论】：

【解决方案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

【讨论】：

【解决方案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')");
});

【讨论】：

OP 询问 Pure JS 而不是 Jquery
哦抱歉我赶时间
没关系，我也可以用 jQuery :) 谢谢，我去看看

【解决方案4】：

您给出的示例将不起作用，因为 + 选择与目标选择器 (http://www.w3.org/TR/css3-selectors/#selectors) 直接相邻的兄弟姐妹。 #navholder 是父元素，我很确定仅通过 CSS 选择元素的父元素是不可能的。

您可以更改结构，使#navholder 位于#nav 内部，并使用~ 通过任何同级选择它，或使用JS 解决方案。

【讨论】：

【解决方案5】：

这不是纯 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')");
        }
    });
});

【讨论】：