新來CSS - 轉換不起作用

Question

我爲學校科學項目推出了一個非常快速，非常非正式的網站。但是，當我將鼠標懸停在列表項目上時，我的列表項目的轉換不起作用。我想提前爲混亂的HTML/CSS道歉。

body { 
 
    background-color: black; 
 
} 
 

 
header { 
 
    background-color: #4C99FF; 
 
    height: 10%; 
 
    float: right; 
 
    border-bottom-left-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
} 
 
.nav-button { 
 
    height: 90%; 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#button-one { 
 
    float: left; 
 
} 
 
#button-two { 
 
    float: right; 
 
} 
 
.button-text { 
 
    color: white; 
 
    font-size: 2vw; 
 
    border: 1px solid white; 
 
} 
 
.nav-list { 
 
    list-style-type: none; 
 
} 
 
.nav-item { 
 
    display: inline-block; 
 
    color: white; 
 
    margin-top: 3%; 
 
    font-size: 2vw; 
 
    border: 1px solid white; 
 
    border-radius: 5px padding: 25px; 
 
    -webkit-transition: color .5s; 
 
    -webkit-transition: background-color: .5s; 
 
    -moz-transition: color .5s; 
 
    -moz-transition: background-color: .5s; 
 
} 
 
.nav-item:hover { 
 
    color: #4C99FF; 
 
    background-color: white; 
 
} 
 
#home { 
 
    float: left; 
 
} 
 
#cited { 
 
    float: right; 
 
    margin-right: 15%; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 header"> 
 
     <!--<div class="col-xs-3 nav-button" id="button-one"> 
 
     <a href="#"><h1 class="button-text"> Home<span></span> </h1></a> 
 
     </div> 
 
     <div class="col-xs-3 nav-button" id="button-two"> 
 
     <h1 class="button-text"> Cited </h1> --> 
 
     <ul class="nav-list"> 
 
     <a href="#"> 
 
      <li class="nav-item" id="home">Home</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li class="nav-item" id="cited">Cited</li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

有人能幫助我解決這個問題？再一次，我對這個混亂的代碼感到非常抱歉。

Answer 1

即使世界幾件事情，首先你不應該使用分號的樣式屬性，它應該是這樣的，而不是：

-webkit-transition: background-color .5s;

你也不能單獨定義的轉換，它應該可以用逗號隔開這樣的：

-webkit-transition: color .5s, background-color .5s;

最後，你應該使用transition樣式屬性藏漢，不僅僅是WebKit和那些MOZ 。

transition: color .5s;