Question

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

Answer 1

删除opacity: 0和animation-fill-mode: forwards属性，以便元素在动画完成后不会尝试维护该状态，然后覆盖bootstrap的:hover CSS通过更改您的选择器以获得更高的特异性或使用.btn-default

来!important

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

也许我只是不了解您的代码，但您并非需要 animation来制作悬停效果，但您可以使用{来控制更改的速度{1}}：

transition

演示：http://codepen.io/dimaspante/pen/NpPGQb

Hover不会处理自定义按钮

2 个答案: