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

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

}

Answer 2

webkit-property和webkit-duration 不是 CSS属性。正确的语法是transition-property和 transition-duration。

-webkit - 仅适用于Google Chrome上的CSS功能vendor prefix 和更新版本的Opera。
在伪类:hover状态下，您只需要声明您将要更改的属性，不必重复宣布的。所以，border-radius已经出局了（除非你想要改变它。）。
您必须将转换设置为默认状态。如果你宣布再次打开：悬停状态，你正在创建第二个实例转换，这就是你按钮上播放这个动画的原因。
您已经在.navigation-bar ul li a 中宣布过渡（并且仅针对颜色而非背景进行过渡）。

因此，现在您遇到了 specificity 的问题，因为定位父类然后直接定位到HTML CSS中的元素比仅仅针对某个类具有更多优先级 （You can check it here）。
如果a中的所有 .navigation-bar 元素都包含在内同样的过渡，你可以在这里设置。 （不理想，但它有效更清洁，变化会更少。）

您还需要为背景添加转场。这并没有改变其余的链接，因为如果你没有设置背景悬停（或焦点）状态，它不会改变。

显然，你必须从中删除过渡 .button-blue，因为你不再使用它了（它会重复）。
尝试模块化更多CSS （不要重复自己）。您可以了解详情搜索BEM，OOCSS或SMACSS （这是一个品味问题）

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

2 个答案: