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，因此当您进入页面时，它似乎从原始背景变为 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 过渡适用于不应该适用的情况？

1 个答案: