css - 将鼠标悬停在另一个div上时如何更改另一个div的背景颜色？

Question

所以，我正在制作一个关于“太阳能”的 HTML 作为学校元素。我在印度上七年级。 我希望当一个人悬停在这些带有 id 的 div 上时:#source、#source_wr 和#arrow-right；带有#source 的 div 的背景颜色应该改变。

我成功地将鼠标悬停在#source 本身上，但没有悬停在其他两个上。 这是我正在使用的代码:

<div id="arrow-right"></div>
<div id="source_wr">Source</div>
<a href="http://www.wikipedia.org/" target="_blank">
<div id="source">
</div>
</a>

这是CSS:

#source_wr{
color: #56C8E3;
font-family: oswald, sans-serif;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 200;
position:absolute;
top:210px;
right:300px;
}
#arrow-right{
width:0px;
height:0px;
border-bottom:25px solid transparent;
border-top:25px solid transparent;
border-left:25px solid #56C8E3;
position:absolute;
top:180px;
right:270px;
}
#source{
position:absolute;
top:0px;
right:0px;
height:240px;
width:264px;
background:url('wiki.png');
background-size:264px 240px;
}
#source:hover{
background:url('wikihover.png');
background-size:264px 240px;
}
#source_wr:hover + #source{
background:url('wikihover.png');
background-size:264px 240px;
}

但这行不通!!!请帮助，如果我需要更具体，我会......请不要说没有 Javascript 就无法实现!是的，所有的 div 都直接在主体内部(但在包含所有主页和更多 div 的 div 之后)

提前谢谢你。

这是整个 HTML 的链接...下载同一个文件夹中的所有内容，除了不需要下载的 PSD 文件。 https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing

Answer 1

试试 general-sibling-combinator ~，它选择任何后续的 sibling ，其中 + on 选择下一个 sibling 。

#source_wr:hover ~ a #source,#arrow-right:hover ~ a #source{
    background:url('wikihover.png');
    background-size:264px 240px;
}