株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

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

galleria

03-01)  1. マウスオーバーで背景色のデザインを変える

 

マウスオーバの時に背景色の色を変更する

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

cssの書き方 /*--------------------------------------------
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>