CSS position: relativeについて

質問

CSS定義のposition: relativeを使うと、マウスがリンクに重なると指定したpointまたはpixelに上下左右に動きますね。そこで、教えて欲しいのは、ある特定のリンク部分は動かないようにしたいのですが、記述次第で出来るのでしょうか？
今、制作中のHPはタブを使っているような感じのものを作っています、そのタブのリンク画像のところはマウスが重なっても動かないようにしたいので、ご存知の方がおりましたら、よろしくお願いします。

回答No.1

steel_gray · ベストアンサー

CSSをページ内の一部にだけ適用するにはセレクタを活用するとよいかと思います。

例
a:hover {/* A(ホバー)の定義 */
position:relative;top:2px;left:2px;
}
div.menu a:hover {/* id="menu"のDIV の配下A(ホバー)の定義 */
position:static;/* position:relativeの効果をキャンセル */
}
<div class="menu">
<a href="hoge1">hoge1（動かない）</a>
<a href="hoge2">hoge2（動かない）</a>
</div>
<p>
<a href="hoge1">hoge1（動く）</a>
<a href="hoge2">hoge2（動く）</a>
</p>

スタイルシートはセレクターがわかって初めて実用的になってくるのでちょっととっつきにくいかもしれませんが勉強してみることをおすすめします。

お礼

ありがとうございました、早速試してみたところ問題なく出来ました。丁寧にhtmlで作成していただき、わかりやすかったです。