おもしろリンクアクション

スタイルシートマニア

おもしろリンクアクション | ホームページカスタマイズ Tips

リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。

リンクのboxを作ってその中のリンクに対してこの効果を有効にするようにします。

まずは、基本設定

.link-box a:link  {
      color: #600;
      position: relative;
}

.link-box a:visited {
      color: #600;
}

※position: relative;はロールオーバー時にテキストを動かす基準にするために指定しておきます。

次ににロールオーバー時のアクションを追加

.link-box a:hover {
      color: #00f;
      text-decoration: none;
      top: 1px;
      left: 0;
}

このままではIEが正常に動作してくれないので、heightプロパティとmarginプロパティを追加します。

.link-box a:link {
      color: #f00;
      height: auto;/*point*/
      position: relative;
}

.link-box a:hover {
      color: #00f;
      margin: auto; /*point*/
      text-decoration: none;
      top: 1px;
      left: 0;
}

<div class="link-box">
<p>ホームページ制作なら<a href="http://source-marine.net">ソースマリン</a></p>
</div>

hideo