鼠标移出链接时CSS转换不起作用

我有一些麻烦与我的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;
}

---

您已经有了前面提到的href的转换属性，因此只需在之前用href声明一次，然后从按钮中删除转换属性，您的css将如下所示：

工作小提琴

webkit属性

和

webkit持续时间

不是CSS属性。 正确的语法是

转换属性

和

转换持续时间

-webkit-只是Google Chrome上CSS功能的一个示例 以及新版本的歌剧

在伪类as

：hover

状态中，只需声明 您将要更改的属性，不必重复 申报的。所以，边界半径是向外的（除非 想改变它）

您必须将转换设置为默认状态。如果你申报 再次打开：悬停状态，您正在为 过渡，这就是为什么你的按钮上有这个动画

您已经在

导航栏ul li a

中声明了一个转换（并且只有颜色转换，没有背景）

因此，现在您遇到了的问题，因为目标是父类，然后直接目标是HTML CSS中的元素比只针对一个类的优先级更高 ().

如果您的

中的所有
元素都将
同样的转换，你可以在这里设置。（虽然不理想，但它确实有效
更干净，更改更少。）

您还需要为背景添加过渡。这不会改变
剩下的链接，因为如果你不在
悬停（或聚焦）状态，它不会更改

显然，您必须从
.button蓝色
，因为您将不再使用它（它将是
重复的）

尝试模块化你的CSS（不要重复你自己）。你 可以了解更多搜索信息，或 （这是品味的问题）

---

请创建一个提琴：在这里，蓝色的getstarted按钮是我试图修复的：）你没有任何与“取消悬停”相关的css。@AMACB谢谢你的帮助，但是喝酒的人帮我解决了：）

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

}