横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
マウスオーバーでテキストの位置を動かす
サイトの配置図を作成する。
マウスオーバー時に li a:hover要素を使って、文字列を上に移動(bottom: 3px;)する
cssの書き方 |
/*------------------------------------------------------- 03-13 マウスオーバーでテキストの位置を動かす -------------------------------------------------------- */ .site_471{ float:left; margin: 0 0 0 10px; width: 600px; } .site_471 li{ margin: 0 0 15px 0; list-style-type: none; font-size: small; } .site_471 li ul{ padding: 15px 0 0 10px; background-image: url("../images/inc_sitemap_lineV.gif"); background-repeat: no-repeat; background-position: left bottom; } .site_471 li ul li{ margin: 0 0 15px 0; padding: 0 0 0 25px; font-size: small; background-image: url("../images/inc_sitemap_lineH.gif"); background-repeat: no-repeat; background-position: 0 11px; } .site_471 li ul li.last{ background-image: none; } .site_471 li a:hover{ position: relative; bottom: 3px; } |
---|---|
HTMLの使用例 |
<ul class="site_471"> <li><a href="#">Home</a> <ul> <li><a href="#">INEXとは?</a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">社長メッセージ</a></li> <li class="last"><a href="#">アクセスマップ</a></li> </ul> </li> <li><a href="#">事業紹介</a> <ul> <li><a href="#">カフェ事業</a></li> <li><a href="#">街づくり事業</a></li> <li><a href="#">イベント事業</a></li> <li class="last"><a href="#">Web制作事業</a></li> </ul> </li> <li><a href="#">プレスルーム</a> <ul> <li><a href="#">2010年</a></li> <li class="last"><a href="#">2009年</a></li> </ul> </li> <li><a href="#">採用情報</a> <ul> <li><a href="#">中途採用</a></li> <li><a href="#">新卒採用</a></li> <li class="last"><a href="#">アルバイト採用</a></li> </ul> </li> <li><a href="#">個人情報保護方針</a></li> <li><a href="#">お問い合わせ</a></li> <li class="last"><a href="#">サイトマップ</a></li> </ul> </li> </ul> |