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

は、まずあなたがスタイル属性のためにセミコロンを使用しないでください、それは、代わりにこのようにする必要があり、物事のカップルをTheresの：

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

あなたはまた、それが必要、別途遷移を定義するべきではありません

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

そして最後に、あなただけのWebKitとMOZもの、aswell transitionスタイル属性を使用していないする必要があります。コンマはこのように分離すること。私たちは白のテキストを見ることができるように実行可能なスニペットと追加身体の背景にそれを作った

transition: color .5s;