Question

我在表单中有一个提交按钮，我试图进行简单的悬停转换。我希望它能够交换按钮文本和按钮背景颜色的颜色。我现在拥有它的方式，文本随着时间的推移成功转换，但背景颜色仍然立即切换颜色。如何修复此问题以使背景颜色随时间变化？我使用的是谷歌浏览器，所以我只进入-webkit转换。一旦我开始工作，我就会将其他浏览器添加到其他浏览器中。

这是我的简化代码：

<form method="post" action="processRegistration.php">

    <input class="submitbutton" type="submit" name="submit" value="Create Account" />

<form>

CSS：

#signupform
form
.submitbutton {
    margin: 0 auto;
    border-radius: 5px;
    border: solid 2px #66cc66;
    background-color: #66cc66;
    color: white;
    -webkit-transition: background-color 1s;
    -webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
      background-color: white;
      color: #66cc66;
      -webkit-transition: background-color 1s;
      -webkit-transition: color 0.5s; }

http://jsfiddle.net/ewkruuk3/

Answer 1

这是因为您宣布transition两次。你基本上用第二个转换覆盖了第一个转换。在CSS中，如果有两个相同的规则，则应用最后一个。你必须在一个声明中用逗号分隔。

transtion: color .5s, background-color 1s;

理想情况下，您的css可以简化为以下内容：

.submitbutton {
    // Other rules

    background-color: #66cc66;
    color: white;

    -webkit-transition: background-color 1s, color 0.5s;
    transition: background-color 1s, color 0.5s; // Include this for browser compatability

    &:hover {
        background-color: white;
        color: #66cc66;
    }
}

您不需要:hover上的转换，因为父规则中的transition也适用。

为什么这个CSS转换不按预期工作？

1 个答案: