将鼠标悬停在另一个 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~，它会选择任何后面的兄弟姐妹，而+ on 会选择下一个兄弟姐妹。

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

Answer 2

您可以简单地使用以下 css 应用效果

#source_wr:hover #source{*the effect you want on source*}
#arrow-right:hover #source {*The effect you want on source*}
#source:hover {*effect*}

Answer 3

1. 你没有关闭你的<a>

2. 建议你把<a>改成<span>

 

$('.source').on('click', function () {
    var url = $(this).find('span').attr('src');
    window.location(url);
});
$('.source').on('hover', function () {
    $(this).css('background-color', '#999'); //new color
}, function {
    $(this).css('background-color', '#666'); //original color
});