2016-07-21 5 views
0

ボタンの上にマウスを置いたときにポップオーバーを生成するはずの次のCSSコードがあります。ホバー上のポップオーバーは常に表示されます

.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 { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-moz-keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-ms-keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-webkit-keyframes move-up { 
    from { bottom: 30px; } 
    to { bottom: 42px; } 
} 
@-moz-keyframes move-up { 
    from { bottom: 30px; } 
    to { bottom: 42px; } 
} 
@-ms-keyframes move-up { 
    from { bottom: 30px; } 
    to { bottom: 42px; } 
} 

ただし、ホバー上ではなくページが読み込まれると、ポップオーバーが表示されます。私は何かが不足していると思うが、私は問題を理解することができない。コードは、もともとhttp://codepen.io/derekpcollins/pen/JCLhG/

+0

.popupに表示を設定する必要があります。ポップアップが表示されるまで、ポップアップは表示されません。 – Keith

+0

上記のcodepenは元のものです。 @ウィンストンはこのStackoverflowのポストで彼のCSSを変更しましたが、codepenは変更しませんでした。 :) –

答えて

1

で発見されたあなたは、これはあなたが私のためにそれをしたい正確に同じように動作しdisplay: none

+0

問題ありません!あなたはこの回答を受け入れていると思いますか? :D –

関連する問題