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;