ｃｓｓでの擬似リンク（a:hover）の複数指定

質問

cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうｋまく行きません。
FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。
■css
/* menu-1 */

#menu-1 {
width: 200px;
height: auto;
margin: 0;
padding:0;
}

#menu-1 ul.support,
#menu-1 li.support {
margin: 0;
padding: 0;
list-style: none;
}

#menu-1 li.support {
width: auto;
height: auto;
padding: 5px 10px;
}

#menu-1 a,
#menu-1 a:link,
#menu-1 a:visited {
padding: 0.2em 10px;
height:1.4me;
color: #ff0000;
text-decoration: none;
}

#menu-1 a:hover {
color: #9f0f0f;
text-decoration: underline;
}

/* menu-2 */
#menu-2 {
width: 200px;
height: auto;
}

#menu-2 ul,
#menu li.list1,
#menu li.list2 {
margin: 0;
padding: 0;
list-style: none;
}

#menu-2 ul li.list1,
#menu-2 ul li.list2 {
width: auto;
height: auto;
}

#menu-2 ul li.list1 {
font-weight: bold;
}

#menu-2 .list1 a,
#menu-2 .list1 a:link,
#menu .list1-s a:visited {
text-decoration: none;
color: #0e2159;
}

#menu-2 .list1 a:hover {
color: #9f0f0f;
text-decoration: underline;
}

#menu-2 li.list2 a,
#menu-2 li.list2 a:link,
#menu li.list2-s a:visited {
text-decoration: none;
color: #000000;
}

#menu-2 li.list2 a:hover {
color: #9f0f0f;
text-decoration: underline;
}

■html
<div id="menu-1">
<a href="#">
<ul>
<li class="support">テスト</il>
</ul>
</a></div>

<div id="menu-2">
<a href="#">
<ul>
<li class="list1">スタイル１</il>
<li class="list2">スタイル２</il>
</ul>
</a></div>

回答No.1

MAN_MA_RUI · ベストアンサー

IE6などはhref属性の指定されたアンカー要素以外に:hoverの擬似クラスを適用しないためこうなります。
CSSのみをいじってどうにかできる問題ではないんじゃないかなぁ？JavaScriptなどを使えばどうにかなるだろうが…。

あと、Netscapeは7とほぼ同じ環境に対応した最新版9と言うものがありますのでサポートする必要性はあまりないと思います。
新しい規格に対応してない古いブラウザをサポートしようとすればデザインに制約が掛かりますよ？

お礼

ありがとうございます。今後の参考にします。
って事はcssだけでスタイルを指定するのは厳しいのでしょうかね。javascriptはあんまり使いたくないのですが・・

回答No.3

noname#66720

IEでもa要素以外にhover等を効かせることができるJavascriptっていうのがあります。(参考リンク参照)
バージョン2のほうはフォーカスにも対応しているので状況によって使い分けるといいと思います。

CSS側で

body { behavior:url("csshover.htc"); }

のような記述で読み込めばIEでも擬似要素以外に対してhoverが有効になります。

参考URL：

http://www.xs4all.nl/~peterned/csshover.html

回答No.2

ICHI-yan

#1さんもおっしゃってますが、a hrefの中にしかhoverはieでは有効になりません。
それでliの外にあったaを中に入れてみました。

classを１つづつつけておられるのでひょっとしたら、テーブルレイアウト思考を引きずっておられる気がしたので、勝手にノークラスバージョンやmenuとlistの番号の組み合わせもサンプルに入れておきました。

a hrefの中にしかhoverは効きません。他はcssの基本的な継承等を勉強されると、どうしてこうなるのかがわかります。コピペ泥棒の学習法では決して理解できない部分ですので、ぜひ、基本から学ばれることを期待して、混乱させるようなものを作ってみました。後、Operaがhoverが絡むとゴミを残します。

ul,li a{
padding:0;
margin:0;
list-style: none;
text-decoration: none;
}
ul{
width: 300px;
}
#menu-1 li{
width: 200px;
margin:auto;
padding: 5px 10px;
}
#menu-1 a:link,
#menu-1 a:visited {
padding: 0.2em 10px;
height:1.4em;
color: #ff0000;
}
#menu-2,
#menu-2 a:link,
#menu-2 a:visited {
color: #000000;
}
.list1 {
font-weight: bold;
}
.list2{
background:#cccccc;
}
#menu-2 .list2 a:link,
#menu-2 .list2 a:visited{
color: #0e21ff;
}
#menu-1 a:hover,
#menu-2 a:hover,
#menu-2 .list2 a:hover{
color: #9f0f0f;
text-decoration: underline;
}

<ul id="menu-1">
<li class="support"><a href="#">テスト(supportクラス)</a></li>
<li><a href="#">テスト（ノークラス）</a></li>
<li><a href="#">テスト（ノークラス）</a></li>
<li class="list1"><a href="#">テスト（list1クラス）</a></li>
<li class="list2"><a href="#">テスト（list2クラス）</a></li>
</ul>

●html
<ul id="menu-2">
<li class="list1"><a href="#">スタイル１</a></li>
<li class="list2"><a href="#">スタイル２</a></li>
<li><a href="#">テスト（ノークラス）</a></li>
<li><a href="#">テスト（ノークラス）</a></li>
<li><a href="#">テスト（ノークラス）</a></li>
</ul>

お礼

貴重なご意見ありがとうございます。
今後の参考にしたいと思います。