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;
}
