css - Popover on hover always show up -

i have following css code, supposed produce popover when hover on button.

.qs {   background-color: #02bdda;   border-radius: 16px;   color: #e3fbff;   cursor: default;   display: inline-block;   font-family: 'helvetica',sans-serif;   font-size: 18px;   font-weight: bold;   height: 30px;   line-height: 30px;   position: relative;   text-align: center;   width: 200px;   margin-top: 25px;    .popover {     background-color: rgba(0,0,0,0.85);     border-radius: 5px;     bottom: 42px;     box-shadow: 0 0 5px rgba(0,0,0,0.4);     color: #fff;     font-size: 12px;     font-family: 'helvetica',sans-serif;     padding: 7px 10px;     position: absolute;     width: 200px;     z-index: 4;     text-align: left;     line-height: 1em;     display: block;     margin: auto;       &:before {         border-top: 7px solid rgba(0,0,0,0.85);         border-right: 7px solid transparent;         border-left: 7px solid transparent;         bottom: -7px;         content: '';         display: block;         left: 50%;         margin-left: -7px;         position: absolute;       }   }    &:hover {       .popover {         display: block;         -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;         -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;         -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;       }     } }  @-webkit-keyframes fade-in {       { opacity: 0; }     { opacity: 1; } } @-moz-keyframes fade-in {       { opacity: 0; }     { opacity: 1; } } @-ms-keyframes fade-in {       { opacity: 0; }     { opacity: 1; } } @-webkit-keyframes move-up {       { bottom: 30px; }     { bottom: 42px; } } @-moz-keyframes move-up {       { bottom: 30px; }     { bottom: 42px; } } @-ms-keyframes move-up {       { bottom: 30px; }     { bottom: 42px; } } 

however popover shows when page loads instead of on hover. guess missing can't figure out problem. code found @ http://codepen.io/derekpcollins/pen/jclhg/

you need set display in .popup display: none