懸停在自定義按鈕上不起作用

我已經在開發控制檯中檢查了所有內容，但在我的樣式中找不到任何衝突。出於某種原因，css僞類不適用於我的自定義樣式按鈕。懸停在自定義按鈕上不起作用

重建這個問題也這裏是我的CSS代碼。

.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

這是你要什麼？ http://codepen.io/anon/pen/mWyeNd –

@MichaelCoker正是這一個！所以我只需要將懸停風格放在@keyframe後面呢？ – antonyboom

@antonyboom我將提交它作爲答案。 –

刪除opacity: 0和animation-fill-mode: forwards屬性，以便在動畫完成後元素不會嘗試保持該狀態，然後覆蓋IDE引導的:hover CSS的.btn-default通過改變你的選擇要麼具有較高的特異性或使用!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

懸停在自定義按鈕上不起作用

回答

相關問題