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

FYI, [Is putting a div inside an anchor ever correct?](http://stackoverflow.com/q/1827965/1577396) — Mr_Green, Feb 25 '13 at 05:47
@Mr_Green, in html5 just about anything can go in an anchor. [w3 html5 a](http://dev.w3.org/html5/markup/a.html#a-changes) — slamborne, Feb 25 '13 at 05:54
Okay so this user1566160 asked for the entire HTML, so here it is: https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing you will have to download everything in a same folder, but leave the .psd files because they are very very very heavy and don't include in the HTML in ANYWAY. — Thakur Saksham Chauhan, Feb 25 '13 at 05:56
@slamborne yes you are right. here is the link http://dev.w3.org/html5/markup/a.html#a-changes — Mr_Green, Feb 25 '13 at 05:59

Musa · Accepted Answer · 2013-02-25T05:52:42.670

0

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

edited Feb 25 '13 at 05:52

answered Feb 25 '13 at 05:47

Musa

96,336
17
118
137

sorry but i've tried it and for some reason it doesn't work :(. – Thakur Saksham Chauhan Feb 25 '13 at 05:51
@ThakurSakshamChauhan I didn't notice the `div` was in the `a`(http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct), see update – Musa Feb 25 '13 at 05:54
Okay... so ... what do I do with the link part then if i have to remove the link... remember that I am in seventh class, from India and no specific teacher or else has taught me this.. I have learn EVERYTHING from the internet – Thakur Saksham Chauhan Feb 25 '13 at 06:01
Yeah! you were right! IT WORKED WHEN I DID IT expelling the anchor tag ! thankyou verymuch ! but the problem is that i want --> http://www.wikipedia.org/ to open in a new tab when one clicks on any of these... – Thakur Saksham Chauhan Feb 25 '13 at 06:08

score 0 · Answer 2 · edited Mar 03 '13 at 04:52

0

You didn't close your <a>
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
});

edited Mar 03 '13 at 04:52

Charlie

11,380
19
83
138

answered Feb 25 '13 at 06:01

bobthyasian

933
5
17

AM sorry @bobthyasian , but I want to minimize the use of javascript as much as I can ! – Thakur Saksham Chauhan Feb 25 '13 at 06:11

score 0 · Answer 3 · answered Feb 25 '13 at 07:22

0

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

answered Feb 25 '13 at 07:22

Khushnood Qadir

1

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

3 Answers3

Linked