株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。
横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
03-03) 1. マウスｵｰﾊﾞｰで矢印、文字色、背景色のデザインを変える
マウスｵｰﾊﾞの時に矢印や文字色を変更する
マウスオーバー時( li a:hover )のプロパティを活用して
矢印（
background:）と
文字色（color:）を変更する
| ｃｓｓの書き方 |
/*--------------------------------------------- 03-03 サイド（ﾒﾆｭｰ1）コンテンツ ---------------------------------------------- */ #sub_navi413{ position: relative; width: 170px; } #sub_navi413 p{ margin-bottom: 10px; } #sub_navi413 ul{ padding: 0px 0; } #sub_navi413 li{ padding: 0 0 0 11px; /* 左端をずらす*/ width: 150px; /* 1行の大きさ */ line-height: 30px; /* 1行の高さ */ font-size: small; font-weight: normal; color: #252525; list-style: none; /* 先ドットなし指定*/ } #sub_navi413 li a{ display: block; padding: 0px 0px 0px 30px; /* ﾎﾞｯｸｽの高さ(追加分） */ border-bottom: 1px #663300 dashed; /*文字部分の下線 */ background: #dfcfbf url("../images/ic_arrow_red.gif") no-repeat 10px 50%; /* 通常 イメージ */ } #sub_navi413 li a:hover{ color: #FF0000; /* 文字の色指定 */ background: #F7D9D9 url("../images/ic_arrow_red.gif") no-repeat 10px 50%; /* マウス選択 イメージ */ } #sub_navi413 li.home a, #sub_navi413 li.home a:hover{ color:#252525; /* 文字の色指定 */ background: #dfcfbf url("../images/snav_dec_01.gif") no-repeat 10px 50%; /* マウス選択 イメージ */ } |
|---|---|
| HTMLの使用例 |
<ul id="sub_navi413"> <li><a href="#">概要・フォトギャリー</a></li> <li><a href="#">パーティープラン</a></li> <li><a href="#">オプション</a></li> <li><a href="#">申込書ダウンロード</a></li> </ul> |