将鼠标悬停在div2上时如何更改div1的图像？

Question

I've been trying to code this tumblr page of mine and I'm currently stuck at the links section. I want my sidebar image to change when I'm hovering over my links, the "HOME", "ASK" etc. Is it possible to do this without using javascript? I've googled it but I haven't been able to come up with a solution, having tried adding different image classes, etc. All I've been able to do is have images appear UNDER the links. I've added the sidebar and links code from my page below. Thanks in advance!

#sidebar {
    position:fixed;
    width:203px;
    top:70px;
    left:70px;
    height:auto;
    padding:15px;
    background-color:#1c1c1c;
}

#sidebarimg img {
    width:203px;
    padding-bottom:5px;
}

#links {
    width:203px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    font-family:times;
    text-align:center;
    text-transform:uppercase;
    opacity:2;
}

#links a {
    margin-top:1px;
    margin-bottom:2px;
    border:1px solid #fff;
    width:98px;
    display:inline-block;
    color:#999999;
    padding-top:5px;
    padding-bottom:5px;
    font-size: 13px;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#links a:hover {
    background:#fff;
    color:#000;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

<div id="sidebar">
<div id="sidebarimg"><img src="{image:sidebar}"></div>

<div id="links">
<a href="{text:Link 1}">{text:Link 1 Text}</a>
<a href="#?w=500" rel="box1" class="poplight">ASK</a>
<a href="#?w=300" rel="box2" class="poplight">MY EDITS</a>
<a href="{text:Link 4}">{text:Link 4 Text}</a>
</div>

EDIT: thanks for the help guys!

Answer 1

No, this is not possible. You can only change an element based on CSS hover behaviours based on the hover state of itself or one of the higher identifiers in your selector.

You can 'cheat' a little using the adjacent and general sibling selectors, but not to entirely different parts of the DOM tree.

Here's an example of both cases where the hovering of an element can affect another element's rendering:

 div { border:1px solid black; padding:5px; } div:hover button:first-of-type { background:red; } button:hover + button { background:red; } 

 <div> <p>The first button will highlight when you mouse into the container. The second button will highlight when you hover over the first. <button>Button 1</button><button>Button 2</button> </div> 

In all more complex cases you'll need Javascript.

Answer 2

You could add an :after pseudo element to the links.

The pseudo element could then be position absolutely above the links.

Then apply a different background-image for each link.

See this jsFiddle

#links a:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 200px;
    height: 200px;
}

#links a:nth-child(1):hover:after {
    background-image: url('...');
}