WEB相談室

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

タイトル:css A:hoverのカラーについて

0:[投稿] シア [2005/07/01 12:01 ][環境:IE6 分かりません]

教えてください。

外部ファイルを読み込む形で、cssのA:hoverを
A:hover {
    color: orange;
    text-decoration: underline;
}
と設定しました。

そして
<head>に
.style2 {
    color: red;
    font-weight: bold;
}
<body>に
<a href="*****"><span class="style2">リンク</span></a>
としたところ
リンク部分のホバー時にオレンジのアンダーラインが付くだけになってしまいます。

ホバー時にリンク全体がオレンジ色で、オレンジのアンダーラインが付く形にしたいのですが、なぜこうなるのか分かりません。

よろしくお願い致します。


1:[回答] あ [2005/07/01 16:48 ]

spanでわざわざ括るのは、なぜですか?
<a href="*****" class="style2">リンク</a>でいいような気が。


2:[質問] シア [2005/07/01 18:54 ]

確かに、括る必要はありませんよね。

しかし
<a href="*****" class="style2">リンク</a>
としても同じ状況です。

どのようにしたらいいのでしょうか・・・


3:[質問] シア [2005/07/01 18:57 ]

たびたびすみません。

<a href="*****" class="style2">リンク</a>

とすると、リンク部分にcssが適応されませんでした。

しかし、どちらでも状況は変わりません。


4:[回答] どら [2005/07/01 22:38 ]

これでどうですか?
<html>
<head><style type="text/css">
<!--
A:hover {
   color: orange;
}
A:link {
   color: red;
   font-weight: bold;
}
-->
</style>
</head>
<body>
<a href="*****">リンク</a>
</body>
</html>


5:[回答] どら [2005/07/01 22:57 ]

こちらの方がいいかも
<style type="text/css">
<!--
A {
   font-weight: bold;
}
A:visited {
   color: red;
}
A:hover {
   color: orange;
}
-->
</style>


6:[回答] び [2005/07/02 08:41 ]

>なぜこうなるのか

A:hoverよりも、.style2への指定の方が優先されるからです。
クラスセレクタの方が、詳細度が高いので優先されます。
http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm


7:[回答] AC1号 [2005/07/02 11:53 ]

>>6
違います。
colorプロパティのデフォルト値はinherit(継承)ですが、>>0ではspan要素で明示的にcolorプロパティを設定しているため、親要素からの継承は行われず、.style2で指定した値が使用されます。

ちなみに:hoverは疑似クラスなので、a:hoverは詳細度011、.style2は詳細度010で、a:hoverの方が詳細度が高くなります。


8:[完了] シア [2005/07/04 19:02 ]

解りました。
みなさまありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World