スタイルシート:マウスオーバー JavaScript web design

マウスオーバー(IE4は未対応)

 サンプルプレビュー
menu1
menu2
menu3
スタイルシート：マウスオーバーで背景色を変える
 コード
スタイルシート部分 
.j1-box       { text-align: center }
.j1-box1      { margin:0px auto;
                text-align:left;
                width:333px;
              }
.j1           { float: left;
                width:109px;
                margin-right:1px;
                text-align: center;
              }
a.menu        { color: #fff;
                text-decoration: none;
                background-color: #999;
                padding:9px 0px;
                width: 110px;
                display: block
              }

a:hover.menu  { background-color: #b03 }
a:active.menu { background-color: #d03 }
.j1-moji      { clear: left; padding:5px }
html部分 

<div class="j1-box">
 <div class="j1-box1">
  <div class="j1">
   <a href="#" class="menu">menu1</a>
  </div>
  <div class="j1">
   <a href="#" class="menu">menu2</a>
  </div>
  <div class="j1">
   <a href="#" class="menu">menu3</a>
  </div>
  <div class="j1-moji">スタイルシート〜</div>
 </div>
</div>
※動作はaタグをdisplay:blockでボックスにして、hoverで背景色を変えております。
※コードでaタグのtitleを省略しております。
※IE4(win)には対応していません。(IE4対応はJavascriptの制作の背景色を変えるを参照ください)

※NN4、IE4.5(Mac)以前のブラウザに対応しておりません。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95％と言われいる為です)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
｜   Link  ｜   Profile  ｜   Sitemap  ｜