外部スタイルシートでリンクについて

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: らら : 2005/02/13 02:32
始めまして、スタイルシートで悩んでるので、アドバイスお願いします。

外部スタイルシートでリンクの設定をする時ですが、

A:link {text-decoration:none;color:#D55500;}
A:visited {text-decoration:none;color:#fd790d;}
A:active {text-decoration:none;color:#fd790d;}
A:hover {text-decoration:none;color:#d55500;position:relative;top:1;left:1;}

↑この設定はこのままで、画像のリンクだけhoverのpositionを無効にしたいのですが
どうすればいいのでしょうか?

よろしくお願いします。

1   名前: 寝太郎 : 2005/02/13 18:00
こんにちは。
えじさん、回答者の皆さん、いつもお世話になっております。

/*.nomove A:link {text-decoration:none;color:#fd790d;}
.nomove A:visited{text-decoration:none;color:#fd790d;}
.nomove A:active{text-decoration:none;color:#fd790d;}*/
.nomove A:hover{text-decoration:none;color:#d55500;position:relative;top:0px;left:0px;}

<div class="nomove">
<a href="../**.html"><img src="image/**.gif" width="20" height="63" border="0">
</a>
</div>

/*h3 A:link {text-decoration:none;color:#fd790d;}
h3 A:visited{text-decoration:none;color:#fd790d;}
h3 A:active{text-decoration:none;color:#fd790d;}*/
h3 A:hover{text-decoration:none;color:#d55500;position:relative;top:0px;left:0px;}

<h3><a href="../**.html"><img src="image/**.gif" width="20" height="63" border="0"></a></h3>

<a>タブを<div>か<h3>タブなどの親ボックスで囲み、a:hoverの「position:relative;top:0px;left:0px;」を
明示的にそれぞれ0pxと指定してやると、画像のリンクは揺れなかったです。
A:hover{text-decoration:none;color:#d55500;}だけだと、なぜか
だめでした。

Homepage Builderのプレヴューで確認しただけですw。はずしてましたら
ごめんなさいね。
詳しくはありませんので、ご参考程度になさってください。

2   名前: むむりく : 2005/02/13 22:41
無理やりな解決法思いついた。

a { text-decoration: none; }
a:link { color: #d55500; }
a:visited { color: #fd790d; }
a:hover {
color: #d55500;
position: relative;
top: 1px;
left: 1px;
}
a:active { color: #fd790d; }
a:hover img {
position: relative;
top: -1px;
left: -1px;
}

3   名前: らら : 2005/02/14 04:14
ありがとうございました。

試してみた結果、成功です。
ホントお世話になりました。m(__)m


一覧へ戻る