Tilde ~
is the sibling selector, but #second
is not the sibling of #first
in your HTML. You need to place #second
inside the wrapper for the ~
to work.
<style>
#first:hover ~ #second
{
background:#000;
}
</style>
<div id='wrapper'>
<!-- Now they share the same parent, so they are siblings -->
<div id='first'>Hover over first</div>
<div id='second'>To black out second</div>
</div>
If #second
needs to be outside of #wrapper
you must use Javascript to change the style of #second
when the mouse is over #first
. Plain CSS does not allow you to select "cousins".
<script>
var third = document.getElementById('third'),
fourth = document.getElementById('fourth');
third.addEventListener('mouseover', function () {
fourth.className = "blackout"
});
third.addEventListener('mouseout', function () {
fourth.className = "";
});
</script>
<style>
.blackout {
background:#000;
}
</style>
<div id='wrapper2'>
<div id='third'>Hover over third</div>
</div>
<div id='fourth'>To black out fourth</div>
Check out the live demo in a jsFiddle