悬停在自定义按钮上不起作用

我已经在开发控制台中检查了所有内容，但在我的样式中找不到任何冲突。出于某种原因，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

悬停在自定义按钮上不起作用

回答

相关问题