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

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

galleria

03-02)　 1.　マウスｵｰﾊﾞｰで矢印や文字色のデザインを変える

　

マウスオーバー時に矢印や文字色を変更する

マウスオーバー時( li a:hover )のプロパティを活用して
矢印（ background-image:）と
文字色（color:）を変更する

ｃｓｓの書き方 /*---------------------------------------------
03-02 リンクの状況によってテキストの色や矢印を変える
--------------------------------------------- */
.sub_navi411{
  position: relative;
  border: 1px solid #000000; /*　全体の枠指定　*/
  width:170px;
  background-color: #dfcfbf ; /* 全体の背景色*/
}
.sub_navi411 ul{
  padding: 10px 0 0 10px; /* 指定しないと右にずれる　*/
}
.sub_navi411 li{
  font-size: small;
  ine-height: 30px; /* 1行の高さ */
  list-style: none; /* 先ドットなし指定*/
}
.sub_navi411 li a{
  padding: 0 0 0 30px; /*　矢印部分をずらす　*/
  border-bottom: 1px #663300 dashed; /*　文字部分の下線　*/
  background: #dfcfbf url("../images/cafe_icon_arrow.gif") no-repeat 10px 50%; /*　通常　イメージ　*/
}

.sub_navi411 li a:link { background-image: url("../images/cafe_icon_arrow.gif");}
.sub_navi411 li a:visited { background-image: url("../images/cafe_icon_arrow_visited.gif");}
.sub_navi411 li a:hover {
  background-image: url("../images/cafe_icon_arrow_hover.gif");
  color: #FF0000; /* 文字の色指定　*/
}
.sub_navi411 li a:active { background-image: url("../images/cafe_icon_arrow_active.gif");}
HTMLの使用例 <div class="sub_navi411">
  <ul>
    <li><a href="#">概要・フォトギャリー</a></li>
    <li><a href="#">パーティープラン</a></li>
    <li><a href="#">オプション</a></li>
    <li><a href="#">申込書ダウンロード</a></li>
  </ul>
</div>