为啥这个 CSS 过渡没有按预期工作？ [复制]

Posted 2023-03-06

【中文标题】为啥这个 CSS 过渡没有按预期工作？ [复制]

【英文标题】：Why is this CSS transition not working as intended? [duplicate]为什么这个 CSS 过渡没有按预期工作？ [复制]

【发布时间】：2015-10-12 13:13:59

【问题描述】：

我在表单中有一个提交按钮，我正在尝试进行简单的悬停转换。我希望它交换按钮文本的颜色和按钮的背景颜色。按照我现在的方式，文本会随着时间的推移成功转换，但背景颜色仍然会立即切换颜色。如何解决此问题以使背景颜色也随时间变化？我使用的是谷歌浏览器，所以我只输入了-webkit-transition。一旦我得到这个工作，我会为其他浏览器添加其他的。

这是我的简化代码：

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

【问题讨论】：

找到生成的css并将其包含在fiddle和question中。

这里，我为你做了：jsfiddle.net/ewkruuk3/2

【参考方案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 也将适用。