HTML、CSSホバーの背景の切り替え

Question

要素の背景色を変更しようとしています。このトランジションはフォントサイズを変更するために機能しますが、何らかの理由でバックグラウンドカラーでは機能しません。これは私のCSSコードです。

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

これは、簡単なナビゲーションバーです：

.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コードです。

私はコードでこれを見つけた：

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

私はそれを削除し、すべてがうまく動作しているようですが、アドバイスのために私はより慎重になります次回はあなたのすべてに感謝します。

Answer 1

これは私のクロームの作品です。すべてのブラウザで正常に動作するようにするには、ホバリングしない状態でbackground-colorを定義する方が良いでしょう。ブラウザは、ホバリングしているときにどの色をアニメーション化するべきかを認識します。

Answer 2

liはdisplay:blockである必要があります。

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

 
li { 
 
    display:block; 
 
} 
 

 
.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; 
 
}

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