copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
検証ツールの支援と多岐にわたるソリューションを提供します。

galleria

03-01)　 1.　マウスｵｰﾊﾞｰで背景色のデザインを変える

　

マウスｵｰﾊﾞの時に背景色の色を変更する

通常時は　 li a要素のプロパティの
背景色（background-color:）、下部の点線（border-bottom:）を指定する
マウスオーバー時に li a:hover要素のプロパティを活用して、
背景色( background-color: )を変更する

ｃｓｓの書き方 /*--------------------------------------------
03-01 サイド（ﾒﾆｭｰ1）コンテンツ
--------------------------------------------- */
#sub_navi412 {
  position: relative;
  width: 170px;
}
#sub_navi412 ul{
  padding: 10px 0; /* 指定しないと右にずれる　*/
}
#sub_navi412 li{
  padding: 0 0 0 11px; /* 左端をずらす*/
  width: 150px; /* 1行の大きさ */
  line-height: 30px; /* 1行の高さ */
  font-weight: normal;
  font-size: small;
  text-indent:20px;
  color: #252525;
list-style: none; /* 先ドットなし指定*/
}
#sub_navi412 li a{
  display: block;
  border-bottom: 1px #663300 dashed; /*文字部分の下線　*/
  background-color: #dfcfbf; /* 通常字の背景色 */
}
#sub_navi412 li a:hover{
  background-color: #F7D9D9; /* カーソルｵｰﾊﾞ時の色指定　*/
}
HTMLの使用例 <div class="sub_navi412">
  <ul>
    <li><a href="#">概要・フォトギャリー</a></li>
    <li><a href="#">パーティープラン</a></li>
    <li><a href="#">オプション</a></li>
    <li><a href="#">申込書ダウンロード</a></li>
  </ul>
</div>