CSS3 hover and active problems - css

Question

Trying to make CSS functional map:
CSS
.fader-us {
display: none;
}
.fader-us-content {
display: none;
position: fixed;
top:50px;
left:50px;
z-index:81;
}
.fader-us:active .fader-us-content {
display:block;
}
.fader-us:active .us {
opacity:0;
}
.fader-us-content:hover {
display: block;
}
.fader-us-content:hover .us {
opacity:0;
}
.fader-us img {
line-height: 0;
z-index:79;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.us {
position:fixed;
top:33px;
left:55px;
z-index:0;
}
HTML
<div class="fader-us">
<img class ="us" src="us.png" alt="">
<div class="fader-us-content">
<li>California</li>
<li>Florida</li>
</div>
</div>
What im trying to do is make us.png img to disappear when my mouse is over "fader-us-content".
Can't figure out why is the image disappearing only when I keep clicking.
Fiddle
http://jsfiddle.net/r9qHa/

Answer 1

Using '~' may be a good way:
.fader-us-content:hover~.us {
opacity:0;
}
Change the html like this:
<div class="fader-us">
<div class="text">
<p>USAs</p>
</div>
<ul class="fader-us-content">
<li>California</li>
<li>Florida</li>
</ul>
<img class ="us" src="http://s23.postimg.org/rixm8ire3/image.png" alt=""/>
</div>
jsfiddle.net

Answer 2

Try changing this:
<div class="fader-us">
<img class ="us" src="us.png" alt="">
<div class="fader-us-content">
<li>California</li>
<li>Florida</li>
</div>
</div>
.fader-us:active .fader-us-content {
display:block;
}
To This:
<div class="fader-us">
<img class ="us" src="us.png" alt="">
<div class="fader-us-content">
<ul>
<li>California</li>
<li>Florida</li>
</ul>
</div>
</div>
.fader-us:active .fader-us-content:hover {
display:block;
}

Answer 3

Working FIDDLE Demo
Add this rules at tne end of your styles:
.fader-us:hover .fader-us-content {
display:block;
}
.fader-us:hover .us { opacity: 0; }