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

我尝试过这个例子：来自On a CSS hover event, can I change another div's styling?

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

但我无法使用我的多个div的布局。

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

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

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

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')");
});

Answer 4

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

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

Answer 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')");
        }
    });
});

如何使多个div更改一个div的背景图像

5 个答案: