すみません、質問させてください。アンカーにidを適用してテスト cssに下記のような記述でマウスオーバーでの変化させていたのんですが、 a#abc {} a:hover#abc {} アンカーにidではなくclassを適用してテスト a.abc {} a:hover.abc {} のように記述しましたところ、ポインタがおかしいです。IE6以外では、色を変えたりすることは可能でしたが、ポインタが指差しマーク状態になりません。どなたか解決する方法をご教授ください。よろしくお願いします。

これのほうが、解りやすいです。テスト #abd a:link,#abc a:visisted { *** } #abd a:link:hover,#abc a:visisted:hover { *** } これに対して........... テストなら・・ #abd:link,#abc:visisted { *** } #abd:link:hover,#abc:visisted:hover { *** } となりませんか？

アンカーにクラスを適用しての擬似クラスの記述の仕方について

解決済

質問者：rodem2009
質問日時：2009/08/21 00:08
回答数：4件

すみません、質問させてください。

アンカーにidを適用して
<a id="abc">テスト</a>
cssに下記のような記述でマウスオーバーでの変化させていたのんですが、
a#abc {}
a:hover#abc {}
アンカーにidではなくclassを適用して
<a class="abc">テスト</a>
a.abc {}
a:hover.abc {}

のように記述しましたところ、ポインタがおかしいです。IE6以外では、色を変えたりすることは可能でしたが、ポインタが指差しマーク状態になりません。

どなたか解決する方法をご教授ください。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： salonpath
回答日時：2009/08/21 00:16

hrefがないからじゃないですか？

この回答への補足

すみません、よく確認したら、hrefがぬけていました。
ありがとうございました。

補足日時：2009/08/21 02:26

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます、書き間違えました。
<a class="abc" href"#">テスト</a>でした。

通報する

お礼日時：2009/08/21 00:56

No.4

回答者： salonpath
回答日時：2009/08/21 02:28

><a class="abc" href"#">テスト</a>でした。

<a class="abc" href="#">を
<a href="#" class="abc">に
たぶん基本は a href それ以降にidやclassやtargetです。

■css
<style>
a:link,
a:hover.abc {
color:#ff3333;
}
a.abc,
a:hover {
color:#66CC00;
}
a:hover#abc {
color:#00CCFF;
}
</style>

■html
<body>
<ul>
<li><a href="#" class="abc">a href class｜classあり</a></li>
<li><a href="#">a href｜classなし</a></li>
</ul>
<ul>
<li><a class="abc">a class｜hrefなし</a></li>
<li><a>a のみ</a></li>
</ul>
<ul>
<li><a class="abc" href"#">a class href</a></li>
<li><a id="abc" href"#">a id href</a></li>
</ul>
</body>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

href="#"が抜けているのに先ほど気づいたところでした。参考にさせていただきます。

通報する

お礼日時：2009/08/21 02:31

No.3

回答者： noname#119957
回答日時：2009/08/21 00:19

↓visitedです。

visistedはスペルミスです。

- 0
- 件

通報する

No.2

回答者： noname#119957
回答日時：2009/08/21 00:17

これのほうが、解りやすいです。

<p id="abc"><a>テスト</a></p>
#abd a:link,#abc a:visisted {
***
}
#abd a:link:hover,#abc a:visisted:hover {
***
}

これに対して...........
<a class="abc">テスト</a>
なら・・
#abd:link,#abc:visisted {
***
}
#abd:link:hover,#abc:visisted:hover {
***
}
となりませんか？