CSSに関する質問です

質問

CSSで下記のように設定したとします。

A:HOVER{
color #好きな色;
position:relative;
top:1px;
left:1px;
}

こうするとリンクにマウスを乗せた時に文字が斜め下に移動するように出来ますが、
これをテキストのみに適用させたいのです。
画像は動くと不格好なところも多いので、画像だけ適応させないような方法はないのでしょうか？

難しいような場合には、
個別に画像に対してCSSをかぶせる予定です。
よろしくお願いいたします。

回答No.1

suzuki-_- · ベストアンサー

a:hover{
position:relative;
top:1px;
left:1px;
}
a:hover img {
position:relative;
top:-1px;
left:-1px;
}

アンカー領域を右下に1pxずらし、ずらした分だけ画像の位置を戻すという方法です
ただ、視覚的には画像に動きが見られなくても、
マウスオーバー時にアンカー領域は右と下に1px分広くなっています

お礼

有り難うございます。
早速実践させていただきました。