Div Opacity onHover Of A Separate Div - html

Question

I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.
My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.
HTML
<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>
CSS
#sell1 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#sell2 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#gap {
height:50px;
background-color:white;
}
.s1, .s2 {
width:100%;
height:247px;
position:absolute;
background:rgba(255, 255, 255, 0.6);
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#sell2:hover .s1 {
opacity:1;
}
http://jsfiddle.net/UgsyL/186/
So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.
Any help?

Answer 1

With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.
If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:
<div id="sell2">
<div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
<div class="s1"></div>
</div>
And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.

Answer 2

This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.
HTML
<ul>
<li><div></div></li>
<br/>
<li><div></div></li>
</ul>
CSS
div {
background-color: rgb(40,80,120);
height: 100px;
width: 200px;
}
ul li {
display: inline-block;
}
ul li div {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
ul:hover li div {
opacity: .5;
}
ul:hover li div:hover {
opacity: 1;
}
http://jsfiddle.net/xbMtN/7/