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

http://jsfiddle.net/r9qha/

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> 

jsfiddle.net


Comments

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

java - Multi-Label Document Classification -

php - Dynamic url re-writing using htaccess -