HTML、CSS 悬停背景过渡

Question

当光标悬停在某个元素上时，我试图更改该元素的背景颜色。此转换适用于更改字体大小，但由于某些原因不适用于背景颜色。这是我的 CSS 代码。

.ul01 a,p{
    height: 100%;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}

.companyName{
    float: left;
}

.ul01 a{
    padding-left: 30px;
    padding-right: 30px;
    width: 90px;
    float: right;
    transition: font 1s, background-color 1s;
}

.ul01 a:hover{
    background-color: red;
    font-size: 30px;
}

这是我的 HTML 代码:

<nav id="nav">
<ul class="ul01">
    <li><p class="companyName"> Company Name </p></li>
    <li><p class="blank"></p></li>
    <li><a href="#facebook"> Facebook </a></li>
    <li><a href="#Twitter"> Twitter </a></li>
</ul>

这是一个简单的导航栏。

我刚刚在代码中发现了这个:

li a:hover:not(.active) {
    background-color: darkgray;
}

我已经删除了，一切正常，谢谢大家的建议，下次我会仔细看看。

Answer 1

它适用于我的 chrome。为了确保它适用于所有浏览器，最好为非悬停状态定义 background-color，这样浏览器就会确定它应该从什么颜色开始/到什么时候开始动画它正在盘旋。