リンク文字変化のタグについて

質問

リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。
色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。

↓これは[head]～[/head]の間に注入するタグのようなのですが
<STYLE type="text/css">
<!--
A:HOVER{
position : relative;
top:3px;　left:3px;}
A{text-decoration : none;
}
-->
</STYLE>

このように[head]～[/head]の間に挿入するタイプのものではなく
個別で指定するにはどのように記述すればいいでしょうか？

↓例えばコレは[head]～[/head]に入れて下線を消すタグですが
<style type="text/css">
A{text-decoration:none;}
</style>

↓こっちは個別に消す下線を消すタグです
<a href="ページのアドレス" style="text-decoration:none">
リンクする文字</a>

このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。

回答No.1

noname#200413

a:hoverは擬似クラスとなりますので、インラインスタイルシートとして使えなかった気がします。（うろ覚えですいません）
ですので、個別にオンマウス時の反応を変えるのであれば、擬似クラスとクラスを組み合わせる必要があります。

<STYLE type="text/css">
<!--
a:hover.red{color:red;}
a:hover.green{color:green;}
-->
</STYLE>

<a href="hoge1.html" class="red">hoge1</a>
<a href="hoge2.html" class="green">hoge2</a>

以上でいかがでしょうか？

補足

回答有難うございます。
このタグで試してみたのですがマウスポインタをあてても何も変化がないです　涙。