テキストの効果にカーソルを合わせる

Question

私はHTML & CSSにはとても新しいですが、ここではそれほど少なくはありません。

私は私のナビゲーションバー内のテキストがホバー時まで輝き作るために一緒にコードのこのビットを入れている：しかし、できるだけ早く私は、テキストから私のカーソルを削除して、グロー瞬時の代わりに消え

li:hover { 
    color: orange; 
    cursor: default; 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 

を点灯したときのように徐々に減少する。

誰でも私がこの効果を達成するために追加しなければならないことを知っていますか？

事前に乾杯。

Answer 1

だけでは、すべての状態の遷移を設定する必要があなたのli

li { 
    transition: all 500ms ease; 
} 

への移行を追加します。 li:hoverのように、要素が上がったときに遷移可能なものすべてを遷移させるようにCSSに指示しました。ここでは、相互作用の後も正常状態に移行するように指示します。

https://jsfiddle.net/Kyle_Sevenoaks/L5s2h1k7/

Answer 2

ホバープロパティの前李のデフォルトプロパティを定義します。

li { 
/*Default properties + animation*/ 
} 

li:hover { 
/*OnHover Properties + animation*/ 
} 

これで、必要に応じてアニメーションが作成されます。

Answer 3

background:#0070ba;色を追加することもできます。

li { 
    transition: all 500ms ease; 
} 
li:hover { 
    background:#0070ba; 
    color: #fff; 
    cursor: default; 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
}