リンク文字を動かす(その三)

| コメント(0) | トラックバック(0)


マウスがリンク文字に乗るとリンク文字が小さく動くようにする。


リンク文字を動かすためには、.CSS ファイルを変更する必要がある。

ここではMT4の既定のブログの .CSS で説明致しますが、他の .CSS ファイルでもやり方は同じだと思います。

特定のリンク文字を動かす場合は「リンク文字を動かす(その一)(その二)」を参考にして下さい。


ブログ内の全てのリンク文字を動かす場合は、a 要素に hover 擬似クラスで移動量を指定してやれば良い。

a:hover {
    position: relative; top: 1px; left: 2px; text-decoration: underline;
}

だが、困った事にこれではリンク指定されている img 迄も動いてしまう。

では、どうすれば?

a:hover img{
    position: relative; top: -1px; left: -2px; text-decoration: underline;
}

とし、a 要素の hover 擬似クラスの img に対して、a 要素で指定した移動量と同じ量だけマイナスし、相殺してやれば良いと言うことになる。

要するに移動させた分、元に戻せって事ですね。





参考になったと思った方はクリック

↓ ↓ ↓ ↓ ↓ ↓

にほんブログ村 IT技術ブログ 自宅サーバー構築へ


トラックバック(0)

トラックバックURL: http://jisakupc.ddo.jp/cgi-bin/mt/mt-tb.cgi/3932

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

インフォブログランキング
知識の杜