オンマウスで特定の画像だけ1ピクセル下げたい

質問

オンマウス時にボタンを押したような効果を出すためリンク画像を1ピクセル下げたいのですが
cssで指定の際
a:hover { position: relative; top: 1pt; }
等としてしまうと、リンクが設定されている文字も画像も全てオンマウス時に動いてしまいます。

自分でもしばらく調べてみたのですが、検索の語がイマイチなのか欲しい情報にヒットしませんでした。
特定のの画像だけ、または文字列だけを動かす指定の書き方がありましたら
教えていただけるとありがたいです。

回答No.2

qualheart · ベストアンサー

その画像のAタグにクラス名指定してはどうでしょうか？
（hoverでクラス名指定ができるか試したことないので、うまくいくかわかりませんが）

画像を囲むAタグを「<a class="img" src...」として
a.img:hover { position: relative; top: 1pt; }
では、ダメでしょうか？

お礼

やってみましたが、残念ながらダメでした。

でも、ご提案いただきありがとうございます。
参考にして精進します。

回答No.1

noname#49428

画像だけの場合
a:hover img { position: relative; top: 1pt; }

お礼

画像全てではなく、特定の画像にのみ、オンマウス時の動きを設定したいのです。

でも、どうもありがとうございます。