我有一个 div 作为网站的横幅/标题图像,该图像最初将显示房屋的图片。横幅还将有 6 个 div 作为按钮,当用户将鼠标悬停在每个 div 上时,它会将标题的背景图像更改为代表每个页面的不同图像。
这是我到目前为止的代码:
Fiddle http://jsfiddle.net/z2w39/1/
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 悬停事件中,我可以更改另一个 div 的样式吗? https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling
#a:hover + #b {
background: #ccc;
}
但我无法让它完全适应我的多个 div 布局。
有没有办法纯粹用 CSS 来做到这一点?
如果这是唯一合理的方式,我会使用 JS。