問：懸停在Html

Question

我遇到了麻煩，我的菜單欄不工作與懸停。我嘗試了與頁面的另一部分，它工作得很好，但沒有與菜單。我在這裏做錯了什麼？

.menu{ 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: auto; 
 
    background: #e7e3d4; 
 
} 
 

 
.menu ul li{ 
 
    list-style: none; 
 
    float: left; 
 
    color: #b23850; 
 
    margin: 0 13px; 
 
    font-size: 20px; 
 
    display: flex; 
 
} 
 

 
.menu ul li:hover{ 
 
    background: 8590AA; 
 
    delay:.5s; 
 
}

 <div class="menu"> 
 
      <ul> 
 
       <li>Home</li> 
 
       <li>Services</li> 
 
       <li>Know Joe</li> 
 
       <li>Contact Us</li> 
 
      </ul> 
 
     </div>

Answer 1

可以使用的背景顏色屬性使用＃符號象下面這樣：

.menu ul li:hover { 
    background: #8590AA; 
} 

.menu{ 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: auto; 
 
    background: #e7e3d4; 
 
} 
 

 
.menu ul li{ 
 
    list-style: none; 
 
    float: left; 
 
    color: #b23850; 
 
    margin: 0 13px; 
 
    font-size: 20px; 
 
    display: flex; 
 
    padding: 0 10px; 
 
} 
 

 
.menu ul li:hover{ 
 
    background: #8590AA; 
 
    transition: all 0.55 ease-in; 
 
}

<div class="menu"> 
 
      <ul> 
 
       <li>Home</li> 
 
       <li>Services</li> 
 
       <li>Know Joe</li> 
 
       <li>Contact Us</li> 
 
      </ul> 
 
     </div>

Answer 2

使用transition: background-color 0.5s，而不是delay: 0.5s

.menu { 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: auto; 
 
    background: #e7e3d4; 
 
} 
 

 
.menu ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
.menu ul li { 
 
    list-style: none; 
 
    color: #b23850; 
 
    padding: 15px; 
 
    font-size: 20px; 
 
    background-color: #e7e3d4; 
 
} 
 

 
.menu ul li:hover { 
 
    background-color: #8590AA; 
 
    transition: all .5s; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>Services</li> 
 
    <li>Know Joe</li> 
 
    <li>Contact Us</li> 
 
    </ul> 
 
</div>

Answer 3

你缺少在菜單UL裏的background屬性＃符號：懸停 嘗試用以下

.menu ul li: hover{ 
background: #8590AA; 
delay :0.5s; 
}