Stackoverflow - Change element style on hover another element
http://stackoverflow.com/q/6966180/918414
by Mark
HTML
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div><!--
--><div id="two" class="box">2</div><!--
--><div id="three" class="box">3</div>
<!-- this works because 4 is after 6 in the markup,
despite its display position -->
<p>Hover over 6 and 4 gets styled.</p>
<div id="six" class="box">6</div><!--
--><div id="four" class="box">4</div><!--
--><div id="five" class="box">5</div>
<!-- works with classes too -->
<p>Hover over 7 and both 8 and 9 get styled.</p>
<div id="seven" class="box">7</div><!--
--><div id="eight" class="box">8</div><!--
--><div id="nine" class="box">9</div>
<script>
/* by: thinkingstiff.com
license:...CSS
#one:hover ~ #three,
#six:hover ~ #four,
#seven:hover ~ .box {
background-color: black;
color: white;
}
#four {
margin-left: -35px;
}
#six {
left: 80px;
position: relative;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}