css - CSS3 hover and active problems -
trying 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: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease; transition: 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 make us.png img disappear when mouse on "fader-us-content". can't figure out why image disappearing when keep clicking.
fiddle
using '~' may way:
.fader-us-content:hover~.us { opacity:0; } change html 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>
Comments
Post a Comment