カスタムボタンでホバーが動作しない

デベロッパーコンソールですべてを確認しましたが、自分のスタイルに競合が見つかりませんでした。何らかの理由で、CSS擬似クラスが私のカスタムスタイルボタンで動作しません。カスタムボタンでホバーが動作しない

私はまたここに私のCSSコードである

plunkerでこの問題を再現しています。

.blinked-in { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:blinkedIn ease-in 1; 
    -moz-animation:blinkedIn ease-in 1; 
    animation:blinkedIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1100ms; 
    -moz-animation-duration:1100ms; 
    animation-duration:1100ms; 
} 

.blinked-in:hover { 
    background-color: #27a5d2 !important; 
    color: white; 
} 

@-webkit-keyframes blinkedIn { 
    from { 
     opacity:0; 
     color: black; 
     background-color: #27a5d2; 
    } 
    to { 
     opacity: 1; 
     border: 1px solid #27a5d2; 
     background-color: #e1f4f9; 
     color: black; 
    } 
} 
@-moz-keyframes blinkedIn { 
    from { 
     opacity:0; 
     color: black; 
     background-color: #27a5d2; 
    } 
    to { 
     opacity: 1; 
     border: 1px solid #27a5d2; 
     background-color: #e1f4f9; 
     color: black; 
    } 
} 
@keyframes blinkedIn { 
    from { 
     opacity:0; 
     color: black; 
     background-color: #27a5d2; 
    } 
    to { 
     opacity: 1; 
     border: 1px solid #27a5d2; 
     background-color: #e1f4f9; 
     color: black; 
    } 
}

出典

2017-02-24 antonyboom

を使用してを持っているあなたのセレクタを変更することで.btn-default用のIDEブートストラップの:hover CSSはあなたが行っている何本か？ http://codepen.io/anon/pen/mWyeNd –

@MichaelCokerまさにこれ！だから私はちょうど@キーフレームの後ろにホバースタイルを置く必要がありますか？ – antonyboom

@antonyboom答えとして提出します。 –

アニメーションの実行後に要素がその状態を維持しようとしないように、opacity: 0プロパティとanimation-fill-mode: forwardsプロパティを削除してから、overrいずれか高い特異性または!important

.blinked-in { 
 
    -webkit-animation: blinkedIn ease-in 1; 
 
    -moz-animation: blinkedIn ease-in 1; 
 
    animation: blinkedIn ease-in 1; 
 
    -webkit-animation-duration: 1100ms; 
 
    -moz-animation-duration: 1100ms; 
 
    animation-duration: 1100ms; 
 
} 
 

 

 
/* make keyframes that tell the start state and the end state of our object */ 
 

 
@-webkit-keyframes blinkedIn { 
 
    from { 
 
    opacity: 0; 
 
    color: black; 
 
    background-color: #27a5d2; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    border: 1px solid #27a5d2; 
 
    background-color: #e1f4f9; 
 
    color: black; 
 
    } 
 
} 
 

 
@-moz-keyframes blinkedIn { 
 
    from { 
 
    opacity: 0; 
 
    color: black; 
 
    background-color: #27a5d2; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    border: 1px solid #27a5d2; 
 
    background-color: #e1f4f9; 
 
    color: black; 
 
    } 
 
} 
 

 
@keyframes blinkedIn { 
 
    from { 
 
    opacity: 0; 
 
    color: black; 
 
    background-color: #27a5d2; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    border: 1px solid #27a5d2; 
 
    background-color: #e1f4f9; 
 
    color: black; 
 
    } 
 
} 
 

 
.blinked-in:hover { 
 
    background-color: #27a5d2 !important; 
 
    color: white!important; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Bootstrap, from Twitter</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <meta name="description" content="" /> 
 
    <meta name="author" content="" /> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css"/> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <button class="btn btn-default blinked-in"> TEST BUTTON</button> 
 
    </body> 
 

 
</html>

出典

2017-02-24 18:12:37

恐ろしい！それは有り難いです。 – antonyboom

@antonyboomあなたは大歓迎です:) –

たぶん私はちょうどあなたのコードを理解していないが、あなたはホバー効果を作るためにanimationは必要ありませんが、あなたはtransitionと変化の速度を制御することができます

.blinked-in { 
    transition: all 1s; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
     color: white; 
     border: 1px solid transparent; 
    background-color: black; 
} 
.blinked-in:hover { 
    border: 1px solid #27a5d2; 
    background-color: #e1f4f9; 
    color: black; 
}

デモ：http://codepen.io/dimaspante/pen/NpPGQb

出典

2017-02-24 18:09:03

カスタムボタンでホバーが動作しない

答えて

関連する問題