How to change the background color of another div when hover on another div?

Question

so, I am making an HTML on 'solar energy' as a school project. I am in seventh class in India. I want that when one hovers on these divs with ids: #source, #source_wr, and #arrow-right; the background color of the div with #source should change.

I am successful with hovering on #source itself, but not on the other two. here's the code I am using:

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

And here's the 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;
}

but this isn't workingg !!! Please help, if i need to be more specific I will be... please don't say it cannot be achieved without Javascript ! And yeah, all the divs are directly inside the body ( but after a div which contains all of the main page and many more divs)

Thankyou in advance.

HERE'S THE LINK FOR THE ENTIRE HTML... DOWNLOAD EVERYTHING IN THE SAME FOLDER EXCEPT THE PSD FILES WHICH DON'T NEED TO BE DOWNLOADED. https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing

Answer 1

Try the general-sibling-combinator ~ , it selects sibling any following sibling where as + on selects the very next sibling.

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

Answer 2

1. You didn't close your <a>

2. I'd suggest you change <a> to <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
});

Answer 3

you can simply apply the effect with the following css

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