WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:マウスを重ねた時下線をつけたい

まきたん[MAIL][URL][WriteDate : Sun Oct 8 20:41:12 2000]

はじめての相談です。
文字のハイパーリンクのことですが
下線を消すのはできたんですが マウスを重ねた時は
色を変えて 下線も表示されるようにしたいのです。
(こちらのHPのように・・・)
以前の投稿や HP内のスタイルシートのコーナーも
読ませていただいたのですが まだできません。
なにか 大事なところ 間違えているのかな?
教えていただきたいです。


ちゃいぱ[MAIL][URL][WriteDate :Sun Oct 8 22:26:17 2000]

今見たら、

A:link { text-decoration: none;} 
A:hover { text-decoration: underline; color:#FF6699;}
A:visited { text-decoration: none;} 
A:active { text-decoration: none;} 

で、
color:#FF6699のFF6699の値を変えれば、マウスを重ねた時に色が変りますよ!
 




まきたん[MAIL][URL][WriteDate :Mon Oct 9 00:28:18 2000]

さっそく教えていただいたのに すみません・・・。
FF6699の値を変えて FF0066
にしてみたのですが まだ色が変わりません。
どうしたらいいでしょう?

ちゃいぱ[MAIL][URL][WriteDate :Mon Oct 9 08:01:52 2000]

う〜ん?
たぶん、onmouseoverとonmouseout、そして、font colorで複雑にしているからかなぁ?

今日は、ちょっと時間がないので、明日、詳しく調べてみます。
もう少しお待ち下さい!


まきたん[MAIL][URL][WriteDate :Mon Oct 9 19:30:17 2000]

ご面倒かけて 申し訳ありません。
お時間空いたらでいいです。
ほんと すみません。

[MAIL][URL][WriteDate :Tue Oct 10 02:36:55 2000]

まきたんさんのサイトのトップページのリンクですが、
簡単のために省略して記述すると

<a><font>what's new</font></a>

というように記述してますよね。
このような記述をした場合、a要素に指定した色よりもfont要素に指定された色の方が優先されてしまうので、色は変わりません。要するに、font要素よりもa要素の方が内側にあるのでテキストの色に対する「支配力」が強いと考えてもらえばわかりやすいと思います。

したがって、a要素に指定した色指定を有効にするにはfont要素とa要素の順番を入れ替えて

<font><a>what's new</a></font>

というように記述すれば良いと思います。

しかし、このように記述すると、今度はfont要素に指定した色が無効になってしまう(おそらく普通のリンクと同じ青色か紫色になると思います)ので、
スタイルシートを使って

a:link { text-decoration: none; color: #800040;}
a:visited { text-decoration: none; color: #800040;} 
a:hover { text-decoration: none; color:#FF6699;}

というようにすべての色を指定する必要があります。
この時、「a:link」と「a:visited」と「a:hover」の順番に注意してください。
スタイルシートには「後から記述した指定の方が支配力が強い」という原則(ただし、この原則だけで支配力の強弱を決めているワケでは無いです)があるので、例えば「a:link」「a:hover」「a:visited」の順番で記述すると、既訪問リンクの色が変わらなくなります。

#ただ、これはWindows版のIE5のバグのような気がします。
#本来なら順番を気にする必要は無いような気がするのですが?
#誰かCSSに詳しい人、教えてください。



それと、ここから先は蛇足になるのですが、

<font><a>what's new</a></font>

というように記述した場合、さっき話した「支配力」の関係上「font color」の指定が無効になってしまうので、じゃあfont要素は必要無いやんってことになります。
ですから、fontタグの中の「onmouseover」と「onmouseout」をaタグの中に放り込んでfontタグを削ってしまっても良いかもしれません。

ちゃいぱ[MAIL][URL][WriteDate :Tue Oct 10 09:56:46 2000]

森さん、回答ありがとうございました!

まきたんさん、私も森さんと同じです!







まきたん[MAIL][URL][WriteDate :Tue Oct 10 22:19:52 2000]

うわ〜〜!すごく丁寧に教えていただき感激です!
初心者の私でも とてもよくわかる解説でした。
そして やっとのことで リンクの色も変わりました。
HTMLのことも スタイルシートのことも
よくわかってなかった。
でも こちらに相談に来て 森さんや ちゃいちゃんぱぱさんの
おかげで 今までよりは 理解が深まった気がします。
本当に ありがとうございました。


カヅサツ[MAIL][URL][WriteDate :Wed Oct 11 14:00:34 2000]

森 様

> 例えば「a:link」「a:hover」「a:visited」の順番で記述すると、
> 既訪問リンクの色が変わらなくなります。 

> #ただ、これはWindows版のIE5のバグのような気がします。 
> #本来なら順番を気にする必要は無いような気がするのですが? 
> #誰かCSSに詳しい人、教えてください。 

:hover がある時点で CSS Level2 なわけですが。

http://www.nets.ne.jp/~okahashi/rec-css2/selector.html#link-pseudo-classes
http://www.nets.ne.jp/~okahashi/rec-css2/selector.html#dynamic-pseudo-classes

要するに「後出し優先」の法則ですので、順番を気にする必要は一応あります。

例えば
a:link{color: black}
a:hover{color: red}
a:visited{color: blue}

とした場合、
既訪問リンクの色は、ポインタを置こうが置くまいが必ず青になります。
(もちろん仕様のハナシで、実際の挙動は知りません)

:link と :visited は互いに排他的なので、
この二つの順序は気にしなくてもモチロン良いです。


[MAIL][URL][WriteDate :Thu Oct 12 01:25:47 2000]

あ〜、CSS2だったんだ。
どうりでCSS1の仕様書を調べてもわからないはずだわ。(バカ?)

……というわけで、どうやら僕の勘違いだったみたいですね。
てっきり、:linkと:visitedと:hoverの3つとも排他的だとばかり思ってました。

カヅサツさんのおかげで間違いに気付くことが出来ました。
本当にありがとうございました。

#それと、バグ持ちブラウザ呼ばわりしてごめんな >IE5

[MAIL][URL][WriteDate :Thu Oct 12 01:29:01 2000]

えと、一応「完了」ということにさせてもらいます。
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]