マウスが当たると色が変わるメニューのCSSについて

マウスが当たると画像が変わるメニューのCSSについて

マウスポインターがメニューに当たると
画像の色が変わるまたは、画像が変わるデザインは、凄く一般的。

よく、ジャバスクリプトを使っているケースがあるけれど
CSSで出来ないものか、調べてみた。

ちょうど良いサンプルコードが見つかったので
参考までに下記に掲載しています。


以下は、某サイトのソースを参考に引用しているだけなので
自分のしたいデザイン用に多少CSS側を書き換える必要があります!


以下はHTMLの記述

<div id="header">
<ul id="top_menu">

<ul id="header_menu">
<li id="hdr_introduction"><a href="/portal/introduction/"></a></li>
<li id="hdr_features"><a href=""></a></li>
<li id="hdr_download"><a href=""></a></li>
<li id="hdr_casestudy"><a href=""></a></li>
<li id="hdr_questions"><a href=""></a></li>
</ul>

</div>
</div>



以下は、CSS側の記述

#header{
background: url(../images/portal/nav_header.jpg) 9px 63px no-repeat;
height: 125px;
position:relative;
}

#header h1{
margin-left: 14px;
}
#header ul#header_menu{
position: absolute;
top: 63px;
left: 296px;
width: 664px;
}
#header ul#header_menu li{
display:block;
float:left;
}
#header ul#header_menu li a{
background: #F7FAFF url(../images/portal/nav_header.jpg) 0 0 no-repeat;
display:block;
width: 132px;
height: 65px;
border-left: 1px solid #fff;
}
#header ul#header_menu li#hdr_introduction a{
background-position: -295px 0;
}
#header ul#header_menu li#hdr_introduction a:hover{
background-position: -295px -65px;
}
#header ul#header_menu li#hdr_features a{
background-position: -425px 0;
}
#header ul#header_menu li#hdr_features a:hover{
background-position: -425px -65px;
}
#header ul#header_menu li#hdr_questions a{
width: 131px;
background-position: -816px 0;
}
#header ul#header_menu li#hdr_questions a:hover{
width: 131px;
background-position: -816px -65px;
}
#header ul#header_menu li#hdr_casestudy a{
background-position: -557px 0;
}
#header ul#header_menu li#hdr_casestudy a:hover{
background-position: -557px -65px;
}
#header ul#header_menu li#hdr_download a{
background-position: -687px 0;
}
#header ul#header_menu li#hdr_download a:hover{
background-position: -687px -65px;
}


関連記事


【 忘却板/忘れた事を貼れます 】

コメント

非公開コメント