为什么 css transition 在不应该的时候应用？

Question

我在 CSS 中有此代码：

#submit{
    border: 2px solid white;
    width: 100px;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border-radius: 30px;
    padding: 10px;
    outline: none;
    color : #fff;
    transition: background-color 0.25s;
}

#submit:hover{
    background: #bbb;

}

问题是，当我在我的页面上尝试时，过渡效果适用于我放置的第一个 background :none，因此当您进入该页面时，它似乎从原始背景变为 none 在 0.25 秒内作为转换指定。如果我没有误解这不应该发生的过渡，问题是什么？如果我错了，你如何使过渡效果在开始时背景发生变化后应用。谢谢！

Answer 1

添加了一些 HTML 以提高可读性。运行代码并注意更改。正如您在代码中所写的那样，您已将过渡设置为悬停，因此仅当您将鼠标悬停在具有 submit id 的容器上时它才适用。

#submit{
    border: 2px solid white;
    width: 100vh;
    height: 80vh;
    background-color: red;
    display: block;
    margin: 20px auto;
    text-align: center;
    border-radius: 30px;
    padding: 10px;
    outline: none;
    color : #fff;
    transition: 0.25s;
}

#submit:hover{
    background: #bbb;
    color: black;

}

<div id="submit">
    <h1>Content</h1>
</div>

为什么 css transition 在不应该的时候应用？

why css transition applies when is not supposed to?

css

css-transitions