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

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

galleria

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

 

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

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

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


03-03)  2. マウスオーバーで矢印の色、文字色、背景色のデザインを変える