HTML
ナビ:マウスオーバーで色変更
★マウスオーバーで色がふわっと変更
要素にtransition: all 0.5s;
HTML
<nav id="globalNav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">会社案内</a></li> <li><a href="#">事業案内</a></li> <li><a href="#">導入事例</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </nav> <!-- /ID globalNav -->
CSS
#globalNav { display: block; margin: 0; padding: 0; height: 67px; clear: both; } #globalNav ul { display: block; margin: 0; padding: 0; width: 100%; list-style: none; } #globalNav li { display: inline; } #globalNav li a { display: block; margin: 0; padding: 30px 0; width: 14%; float: left; text-align: center; list-style: none; background: #EEE; border-right: 2px solid #FFF; color: #333; letter-spacing: 0.1em; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } #globalNav li a:hover { background: #063; color: #FFF; }