鼠标移开链接时 CSS 过渡不起作用

Question

我的 CSS 有一些问题，我制作了一个按钮，我给了它一些 CSS 来添加带有 webkit 转换的颜色变化效果，颜色变化在悬停时有效，但是当鼠标离开按钮时它不会显示它恢复到以前的效果，这是我的 css

.button-blue{
    border: 1px solid #00B7EF;
    border-radius: 5px;
    color: #00B7EF !important;
    background-color: transparent;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 0.5s;
    webkit-property: background-color, color;
    webkit-duration: 0.5s;
}

.button-blue:hover {
    border: 1px solid #00B7EF;
    border-radius: 5px;
    color: white !important;
    background-color: #00B7EF;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 0.5s;
    webkit-property: background-color, color;
    webkit-duration: 0.5s;
}

Answer 1

你之前已经为你的 href 声明了过渡属性，所以只需在你的 href 之前声明一次并从你的按钮中删除过渡属性，这样你的 css 将如下所示:

工作 fiddle Fiddle

.navigation-bar ul li a {
    color: #333333;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 400;
    font-style: bold;
    padding: 5px 5px 10px 10px;
      -webkit-transition-property: background-color, color;
      -webkit-transition-duration: 0.5s;
      webkit-property: background-color, color;
      webkit-duration: 0.5s;
}
.button-blue{
    border: 1px solid #00B7EF;
    border-radius: 5px;
    color: #00B7EF !important;
    background-color: transparent;
}

.button-blue:hover {
    border: 1px solid #00B7EF;
    border-radius: 5px;
    color: white !important;
    background-color: #00B7EF;

}