CSS转换：背景不起作用

Question

大家好，我目前在使用过渡属性时遇到问题：背景。 “背景”一词为红色，我不知道为什么它不接受它为财产。

    li{
        background:rgb(32, 32, 255);
        display: inline-block;
        font-size: 25px;
        width: 80px;
        padding: 0 100px 0 20px;
        transition: background 2s;

    }

li:hover{
         background-color: rgb(255, 28, 28);

    }

Answer 1

替换过渡属性

li{
            background:rgb(32, 32, 255);
            display: inline-block;
            font-size: 25px;
            width: 80px;
            padding: 0 100px 0 20px;
            transition: background-color 2s;

        }

    li:hover{
             background-color: rgb(255, 28, 28);

        }

Answer 2

您的代码需要进行一些修改。参见下面的代码。

HTML

<ul>
    <li>Transition Background</li>
    <li>Transition Background</li>
    <li>Transition Background</li>
</ul>

CSS

ul{
    margin: 0;
    padding: 0;
}
ul li{
    background: rgb(32, 32, 255);
    color: white;
    display: inline-block;
    padding: 10px 15px;
    transition: all 0.3s ease-in-out 0s;
}
ul li:hover{
    background: rgb(255, 28, 28);
}

摘要

ul{
        margin: 0;
        padding: 0;
    }
    ul li{
        background: rgb(32, 32, 255);
        color: white;
        display: inline-block;
        padding: 10px 15px;
        transition: background 0.3s;
    }
    ul li:hover{
        background: rgb(255, 28, 28);
    }

<ul>
    <li>Transition Background</li>
    <li>Transition Background</li>
    <li>Transition Background</li>
</ul>

您的transition正在工作，但由于delay 2 seconds（您必须等待两秒钟），所以您认为它没有工作。您的问题是CSS transition timing function和CSS Transition Delay。我将CSS transition时间2s更改为0.3s。

请阅读CSS transitions，transition，transition-duration，transition-timing-function，transition-delay，transition-property。